Ng-Pattern-4

 
It sets the pattern validation key if first textbox data does not match a RegularExpression and in second textbox it will call the compare(repassword) function on keyup event that will compare the password.
 
 
 
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .red{ color:red } .green{ color:green } </style> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script> </head> <body ng-app="app"> <div ng-controller="controllerName"> <ng-form name="passwordForm"> Password: <input type="password" ng-model="password" name="password" ng-pattern="re" /> <br /> <span ng-show="passwordForm.password.$error.pattern" style="color:red">Not valid password.</span> <br /> Confirm: <input type="password" ng-model="repassword" ng-keyup="compare(repassword)" name="repassword" ng-pattern="re" /> <br /> <span ng-show="isconfirm || passwordForm.repassword.$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('controllerName', ['$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