AngularJS Custom Validators
AngularJs has some minimal validators, however it provides developers ways to create their own validators. Creating a custom validator is super simple. Here in this example we create a validator that does not allow numbers on a given input, what more, you can access this validator on the $error object and can also be used with ng-messages.
View it live in Plunker
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>AngularJS Form Example</title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js"></script> <script type="text/javascript"> var app = angular.module('myApp', ['ngMessages']); app.directive('numbersNotAllowed', function () { return { restrict: 'A', require: 'ngModel', link: function (scope, element, attr, ctrl) { ctrl.$validators.nonumber = function (val) { if (val) { return !(/\d/.test(val)); } }; } } }); </script> </head> <body> <form name="signUpForm" class="frm" novalidate> UserName: <input type="text" name="uname" ng-model="user.name" ng-minlength=3 ng-maxlength=20 ng-pattern="/^[a-zA-Z]/" required numbers-not-allowed/> <br/> <div ng-messages="!signUpForm.uname.$untouched && signUpForm.uname.$error" class="error"> <div ng-message="required"> UserName is required. </div> <div ng-message="minlength"> UserName is required to be at least 3 characters </div> <div ng-message="maxlength"> UserName cannot be longer than 20 characters </div> <div ng-message="pattern"> must start with an alphabet </div> <div ng-message="nonumber"> must not contain numbers </div> </div> Email: <input type="email" name="email" ng-model="user.email" ng-minlength=3 ng-maxlength=20 required /> <div class="error" ng-show="signUpForm.email.$dirty && signUpForm.email.$invalid"> <small class="error" ng-show="signUpForm.email.$error.email"> That is not a valid email. Please input a valid email. </small> </div> </form> </body> </html> |
“Keep learning.”
-Rushi
-Rushi