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, Aug 08 '16 at 03: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, Aug 08 '16 at 03:28
@charlietfl, it seems the same as http://blog.brunoscopelliti.com/angularjs-directive-to-check-that-passwords-match/ — developer033, Aug 08 '16 at 03: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, Aug 08 '16 at 03:38
No, @charlietfl, I mean that he picked there, not that he wrote exactly the same. — developer033, Aug 08 '16 at 03:39
@CiscoKidx, I suggest you to take a look on that link again, you're missing some important things.. — developer033, Aug 08 '16 at 03:40
I compared lines for line and don't see a difference. What is missing? — CiscoKidx, Aug 08 '16 at 03:43
the `id` in the first `input` is one of them.. Also the `ngModel` of the `input` is totally wrong, it gives syntax error.. — developer033, Aug 08 '16 at 03:43
@CiscoKidx, well, I noticed that post is a bit old, he uses Angular 1.0.8 version, and even if you correct your *issues* it shouldn't work.. however you can use another directive.. this for example: http://odetocode.com/blogs/scott/archive/2014/10/13/confirm-password-validation-in-angularjs.aspx See the [**Plunker**](http://plnkr.co/edit/ZnBRbT3qo4xDoKYgrU5s?p=preview) — developer033, Aug 08 '16 at 04:19

score 1 · Accepted Answer · answered Aug 08 '16 at 04:16

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>

AngularJS compare password fields

1 Answers1

Linked