Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Forms in AngularJS

19.909 visualizaciones

Publicado el

Forms and Validations in AngularJS

Forms in AngularJS

  1. 1. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
  2. 2. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
  3. 3. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com <form name="myform" class="css-form" novalidate> disable browser's native form validation Name: <input type="text" ng-model="user.name"/> E-mail:<input type="email" ng-model="user.email" required/> Gender: <input type="radio" ng-model="user.gender" value="male"/> male <input type="radio" ng-model="user.gender" value="female"/> female </form> <button ng-click="reset()" ng-disabled="isUnchanged(user)"> RESET </button> <button ng-click="update(user)" ng-disabled=“myform.$invalid || isUnchanged(user)"> SAVE </button> validation <style type="text/css"> .css-form input.ng-invalid.ng-dirty {background-color: #FA787E;} .css-form input.ng-valid.ng-dirty {background-color: #78FA89;} </style> Binding the input element to scope property
  4. 4. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com <!-- Expressions --> Please type your name : {{name}} <!-- Directives & Data Binding --> Name: <input ng-model="name" value="..." /> Template name : Scope value elm.bind('keydown', … ) $scope.$watch('name', … ) Directive
  5. 5. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com Form  Name  Email  Age  Submit function  Reset function Scope Binding Proxies Server
  6. 6. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com Data Binding
  7. 7. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
  8. 8. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com  ng-model-options="{ updateOn: 'default blur', debounce: {'default': 500, 'blur': 0} }"
  9. 9. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
  10. 10. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
  11. 11. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com Types  Text  Checkbox  File  Password  Email  URL  Number  Range  Date Validations  novalidate  Required  Pattern  Minlength  Maxlength  Min  Max Status  $error  $pristine  $dirty  $valid  $invalid  $touched  $untouched  $pending CSS  ng-valid  ng-invalid  ng-pristine  ng-dirty  ng-touched  ng-untouched  ng-pending Events  ng-click  ng-change  ng-submit
  12. 12. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com <input type="checkbox" ng-model="{string}" [name="{string}"] [ng-true-value="{string}"] [ng-false-value="{string}"] [ng-change="{string}"]> <input type="email" ng-model="{string}" [name="{string}"] [required] [ng-required="{string}"] [ng-minlength="{number}"] [ng-maxlength="{number}"] [ng-pattern="{string}"]> <input type="number" ng-model="{string}" [name="{string}"] [min="{string}"] [max="{string}"] [required] [ng-required="{string}"] [ng-minlength="{number}"] [ng-maxlength="{number}"] [ng-pattern="{string}"] [ng-change="{string}"]> <input type="radio" ng-model="{string}" value="{string}" [name="{string}"] [ng-change="{string}"]> <input type="text" | type="URL" ng-model="{string}" [name="{string}"] [required] [ng-required="{string}"] [ng-minlength="{number}"] [ng-maxlength="{number}"] [ng-pattern="{string}"] [ng-change="{string}"]>
  13. 13. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com Form  $error  $pristine  $dirty  $pending NgModelController <button ng-click="update(user)" ng-disabled="form.$invalid || isUnchanged(user)"> SAVE </button> <span ng-show="f.uEmail.$dirty && f.uEmail.$invalid"> Invalid: <span ng-show="form.uEmail.$error.email"> This is not a valid email.</span> </span> NgModelController ng-model  $valid  $invalid  $submitted  $error  $pristine  $dirty  $pending  $valid  $invalid
  14. 14. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com Form Validations
  15. 15. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
  16. 16. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com $async Validators $parsers $modelValue ngModelController $validators $async Validators $validators $format ters $view Change Listeners$render Status  $error  $pristine  $dirty  $valid  $invalid  $touched  $untouched  $pending $viewValue $$lastCommittedViewValue $commitViewValue $rollbackViewValue $$debounce ViewValue Commit $setView Value
  17. 17. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
  18. 18. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com ngModelController ($pristine, $dirty, $error, $valid, $invalid ) $setValidity()$setPristine() <style type="text/css"> input.ng-invalid.ng-dirty {background-color: #FA787E;} input.ng-valid.ng-dirty {background-color: #78FA89;} </style>
  19. 19. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com app.directive('contenteditable', function() { return { require: 'ngModel', link: function(scope, elm, attrs, ctrl) { // view -> model elm.bind('blur', function() { scope.$apply(function() { ctrl.$setViewValue(elm.html()); }); }); // model -> view ctrl.$render = function() { elm.html(ctrl.$modelValue); }; // load init value from DOM ctrl.$setViewValue(elm.html()); } }; }); <div ng-model="content" title="Click to edit" contentEditable="true" >Some</div> <pre>model = {{content}}</pre>
  20. 20. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com Custom Binding
  21. 21. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
  22. 22. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
  23. 23. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com app.directive('smartFloat', function () { return { require: 'ngModel', link: function (scope, elm, attrs, ctrl) { ctrl.$parsers.unshift( function (viewValue) { if ( FLOAT_REGEXP.test(viewValue) ) { // it is valid ctrl.$setValidity('float', true); return parseFloat(viewValue.replace(',', '.')); } else { // it is invalid, return undefined (no model update) ctrl.$setValidity('float', false); return undefined; } }); } }; }); <div> Length (float): <input type="text" ng-model="length" name="length" smart-float />{{length}}<br /> <span ng-show="form.length.$error.float">This is not a valid float number!</span> </div>
  24. 24. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com mi.directive('validatePasswordCharacters', function () { var REQUIRED_PATTERNS = [/d+/,/[a-z]+/,/[A-Z]+/,/W+/,/^S+$/]; return { require: 'ngModel', link: function ($scope, element, attrs, ngModel) { ngModel.$validators.passwordCharacters = function (value) { var status = true; angular.forEach(REQUIRED_PATTERNS, function (pattern) { status = status && pattern.test(value); }); return status; }; } } });
  25. 25. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com mi.directive('validatePasswordCharacters', function () { var REQUIRED_PATTERNS = [/d+/,/[a-z]+/,/[A-Z]+/,/W+/,/^S+$/]; return { require: 'ngModel', link: function ($scope, element, attrs, ngModel) { ngModel.$validators.passwordCharacters = function (value) { var status = true; angular.forEach(REQUIRED_PATTERNS, function (pattern) { status = status && pattern.test(value); }); return status; }; } } }); <form name="myForm"> <div class="label"> <input name="myPassword" type="password" ng-model="data.password" validate-password-characters required /> <div ng-if="myForm.myPassword.$error.required"> You did not enter a password </div> <div ng-if="myForm.myPassword.$error.passwordCharacters"> Your password must contain a numeric, uppercase and lowercase as well as special characters </div> </div> </form>
  26. 26. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com ngModule.directive('usernameAvailableValidator', function($http) { return { require: 'ngModel', link: function($scope, element, attrs, ngModel) { ngModel.$asyncValidators.usernameAvailable = function(username) { return $http.get('/api/username-exists?u=' + username); }; } } });
  27. 27. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com ngModule.directive('usernameAvailableValidator', function($http) { return { require: 'ngModel', link: function($scope, element, attrs, ngModel) { ngModel.$asyncValidators.usernameAvailable = function(username) { return $http.get('/api/username-exists?u=' + username); }; } } }); <form name="myForm"> <!-- first the required, pattern and minlength validators are executed and then the asynchronous username validator is triggered... --> <input type="text" class="input" name="username" minlength="4" maxlength="15" ng-model="form.data.username" pattern="^[-w]+$" username-available-validator placeholder="Choose a username for yourself" required /> <div ng-if="myForm.myUsername.$pending"> Checking Username... </div> </form>
  28. 28. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com Custom Form Validations
  29. 29. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
  30. 30. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com <script src="angular.js" /> <script src="angular-messages.js"> angular.module('app', ['ngMessages']);
  31. 31. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com <script type="text/javascript" src="angular-messages.js"></script> <script type="text/javascript"> var ngModule = angular.module('myApp', ['ngMessages']); </script> <form name="myForm"> <input type="text" name="colorCode" ng-model="data.colorCode" minlength="6" required /> <div ng-messages="myForm.colorCode.$error" ng-if="myForm.$submitted || myForm.colorCode.$touched"> <div ng-message="required">...</div> <div ng-message="minlength">...</div> <div ng-message="pattern">...</div> </div> <nav class="actions"> <input type="submit" /> </nav> </form>
  32. 32. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com <script type="text/ng-template" id="my-custom-messages"> <div ng-message="required">This field is required</div> <div ng-message="minlength">This field is too short</div> </script> <form name="myForm"> <input type="email" id="email" name="myEmail" ng-model="email" minlength="5" required /> <div ng-messages="myForm.myEmail.$error" ng-messages-include="my-custom-messages"> <div ng-message="required">You did not enter your email</div> <div ng-message="email">Your email address is invalid</div> </div> </form>
  33. 33. © 2014 All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com eyalvardi.wordpress.com

×