Angularjs check if passwords match – Use a directive.
pwcheck.js directive
|
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 |
define(['angular', 'app'], function (angular) { 'use strict'; /** * @ngdoc directive * @name ngSeed.directives:pwCheck * @description * Simply checks if two passwords match. */ angular .module('app.directives') .directive('pwCheck', function() { return { require: 'ngModel', link: function (scope, elem, attrs, ctrl) { var firstPassword = '#' + attrs.pwCheck; $(elem).add(firstPassword).on('keyup', function () { scope.$apply(function () { var v = elem.val()===$(firstPassword).val(); ctrl.$setValidity('pwcheck', v); }); }); } } }); }); |
ngHTML
|
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 |
<!-- Password --> <div class="form-group"> <label for="password">Password*</label> <input type="password" id="password" name="password" class="form-control" ng-model="credentials.password" placeholder="Password" required /> <div ng-show="(registerForm.email.$dirty || submitted)"> <span class="error" ng-show="registerForm.password.$error.required">Please enter a password.</span> </div> </div> <!-- Confirm Password --> <div class="form-group"> <label for="passwordConfirmation">Confirm Password*</label> <input type="password" id="passwordConfirmation" name="passwordConfirmation" class="form-control" ng-model="credentials.passwordConfirmation" placeholder="Password" pw-check="password" required /> <div ng-show="(registerForm.email.$dirty || submitted)"> <span class="error" ng-show="registerForm.passwordConfirmation.$error.required">Please confirm your password.</span> <span class="error" ng-show="registerForm.passwordConfirmation.$error.pwcheck">Your passwords don't match.</span> </div> </div> |
ref:
https://blog.brunoscopelliti.com/angularjs-directive-to-check-that-passwords-match