Forms in AngularJS

18,388 views
17,925 views

Published on

Forms and Validations in AngularJS

2 Comments
29 Likes
Statistics
Notes
No Downloads
Views
Total views
18,388
On SlideShare
0
From Embeds
0
Number of Embeds
1,788
Actions
Shares
0
Downloads
0
Comments
2
Likes
29
Embeds 0
No embeds

No notes for slide
  • $setValidity(validationErrorKey, isValid)
    Change the validity state, and notifies the form when the control changes validity. (i.e. it does not notify form if given validator is already marked as invalid).
    This method should be called by validators - i.e. the parser or formatter functions.
    Parameters
    validationErrorKey – {string} – Name of the validator. the validationErrorKey will assign to $error[validationErrorKey]=isValid so that it is available for data-binding. ThevalidationErrorKey should be in camelCase and will get converted into dash-case for class name. Example: myError will result in ng-valid-my-error and ng-invalid-my-error class and can be bound to as {{someForm.someControl.$error.myError}} .
    isValid – {boolean} – Whether the current state is valid (true) or invalid (false).
  • 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

    ×