AngularJS ng-pattern Directive
The ng-pattern Directive in AngularJS is used to add up pattern (regex pattern) validator to ng-Model on an input HTML element. It is used to set the pattern validation error key if input field data does not match a RegExp that is found by evaluating the Angular expression specified in the ng-pattern attribute value.
Syntax:
<element ng-pattern="expression"> Contents... </element>
Example 1: This example implements the ng-pattern Directive to check the password pattern.
HTML
<!DOCTYPE html> < html > < head > < title >ng-pattern Directive</ title > < script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js" > </ script > < style > .red { color: red } .green { color: green } </ style > </ head > < body ng-app = "app" style = "text-align:center" > < h1 style = "color:green;" > w3wiki </ h1 > < h2 >ng-pattern Directive</ h2 > < div ng-controller = "geek" > < ng-form name = "pass" > Password: < input type = "password" ng-model = "password" name = "password" ng-pattern = "re" />< br > < span ng-show = "pass.password.$error.pattern" style = "color:red" > Not valid password. </ span >< br > Confirm: < input type = "password" ng-model = "repass" ng-keyup = "compare(repass)" name = "repass" ng-pattern = "re" />< br > < span ng-show = "isconfirm || pass.repass.$dirty " ng-class = "{true:'green',false:'red'}[isconfirm]" > Password {{isconfirm==true?'':'not'}} match </ span > </ ng-form > </ div > < script > var app = angular.module("app", []); app.controller('geek', ['$scope', function ($scope) { $scope.re = /^[a-zA-Z]\w{3,14}$/; $scope.compare = function (repass) { $scope.isconfirm = $scope.password == repass ? true : false; } }]); </ script > </ body > </ html > |
Output: The below output illustrates an invalid Input, when the Input doesn’t Match, & the Valid Input.
Example 2: This example shows an error if the input is anything other than a number.
HTML
<!DOCTYPE html> < html > < head > < title >ng-pattern Directive</ title > < script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js" > </ script > </ head > < body ng-app = "app" style = "text-align:center" > < h1 style = "color:green;" > w3wiki </ h1 > < h2 >ng-pattern Directive</ h2 > < div ng-controller = "geek" > < ng-form name = "num" > Input Number: < input type = "text" ng-model = "number" name = "number" ng-pattern = "re" />< br /> < span ng-show = "num.number.$error.pattern" style = "color:red" > Input is not valid. </ span > </ ng-form > </ div > < script > var app = angular.module("app", []); app.controller('geek', ['$scope', function ($scope) { $scope.re = /^[0-9]{1,6}$/; }]); </ script > </ body > </ html > |
Output: From the output, when the input is the text & when the Input is a number: