Friday, 17 June 2016

AngularJS match password with confirm passwords.

Create directive for match the password with confirm password.

Step 1: Add "pwCheck" directive into your directive js file. In my case I have created "myDirective", 
for create custom directives.

var directive = angular.module("myDirective", []);
directive.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('pwmatch', v);
                });
            });
        }
    }
}]);


Step 2: For consume this directive you just need to add attribute named "pw-check" to Confirm Password text box  and assign it to id of the password control.

<label>Password</label>
<input class="form-control"
                       id="inputPassword"
                       name="inputPassword"
                       type="password"
                       placeholder="Password"
                       ng-model="vm.Password"
                       required
                       ng-minlength="6" />

<label>Confirm Password</label>
  <input class="form-control"
                       id="inputConfirmPassword"
                       name="inputConfirmPassword"
                       type="password"
                       placeholder="Confirm Password"
                       ng-model="vm.ConfirmPassword"
                       required
                       ng-minlength="6"
                       pw-check="inputPassword" />

No comments:

Post a Comment