AngularJS compare password fields

Question

I am trying to compare two password fields using a custom directive. It doesn't seem to be doing anything and I don't know how to debug this. Here is my code:

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);
          });
        });
      }
    };
}])

html:

   <div class="container" ng-controller="Reset">

      <!-- P A S S W O R D -->
        <div class="form-group" ng-class="{'has-error' : reset.password.$invalid && reset.password.$dirty}">
          <div>
            <input type="password" class="form-control" name="password" placeholder="Password" ng-model="resetForm.AngularJS password" required ng-minlength="8">
            <span class="help-block has-error" ng-if="reset.password.$dirty">
              <span ng-show="reset.password.$error.required">Password is required.</span>
              <span ng-show="reset.password.$error.minlength">Password must be at least 8 characters.</span>
            </span>
          </div>
        </div>

        <!-- C O N F I R M   P A S S W O R D -->
        <div class="form-group" ng-class="{'has-error' : reset.confirmPassword.$invalid && reset.confirmPassword.$dirty}">
          <div>
            <input type="password" class="form-control" name="confirmPassword" placeholder="Confirm Password" ng-model="resetForm.confirmPassword" required pw-check="reset.password">
            <span class="help-block has-error" ng-if="reset.password.$error.pwmatch">
              <span ng-show="reset.password.$error.pwmatch">Passwords must match.</span>
            </span>
          </div>
        </div>

     </div>

Would be nice if you could also provide a fiddle with this. Easy for a person to look and understand — Rumesh Eranga Hapuarachchi
– Rumesh Eranga Hapuarachchi, Commented Aug 8, 2016 at 3:24
var firstPassword = '#' + attrs.pwCheck; is creating an ID selector but there is no such ID shown. Also an ID selector with a dot in it would need escaping. elem.add(firstPassword).length is probably one and $(firstPassword).length is probably zero — charlietfl
– charlietfl, Commented Aug 8, 2016 at 3:28
@charlietfl, it seems the same as blog.brunoscopelliti.com/… — developer033
– developer033, Commented Aug 8, 2016 at 3:34
@developer033 not the same... no ID on element here and jQuery selector will be $(#reset.password') which is looking for an ID of reset that has class password — charlietfl
– charlietfl, Commented Aug 8, 2016 at 3:38

kicken · Accepted Answer · 2016-08-08 04:16:28Z

1

I use the following directive in my sign up to compare the password fields.

app.directive('validateIdentical', function ValidateIdenticalDirective(){
    return {
        restrict: 'A'
        , scope: {
            expression: '<validateIdentical'
        }
        , require: ['ngModel']
        , link: link
    };

    function link($scope, $element, $attrs, $controllers){
        var $ngModel = $controllers[0];

        $ngModel.$validators.identical = function isIdentical(modelValue){
            return $scope.expression == modelValue;
        };
    }
});

Used like this:

<form>
    <label>Password: <input type="password" ng-model="vm.password"></label><br>
    <label>Confirm: <input type="password" ng-model="vm.confirmPassword" validate-identical="vm.password"></label>
</form>

answered Aug 8, 2016 at 4:16

kicken

2,17715 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS compare password fields

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related