Custom AngularJS “Confirm Password” Directive not working

Question

Because AngularJS doesn't have native "confirm password" functionality, I am writing my own today for an application. I have seem many tutorials for doing this online, and am following a very popular one written by K Scott Allen at his Odetocode.com blog

My version of it is like this:

Directive

angular.module('dashboard').directive('pwCheck', function() {
  return {
    require: 'ngModel',
    scope: {
      otherModelValue: '=pwCheck'
    },
    link: function(scope, element, attributes, ngModel) {

     ngModel.$validators.pwCheck = function(modelValue) {
       return modelValue == scope.otherModelValue;
     };

     scope.$watch('otherModelValue', function() {
       ngModel.$validate();
     });
   }
 };
});

The directive is pretty self-explanatory, it watches the other model value and each time it changes, checks to see if the two equal each other. When they finally do, my custom form validation "pwCheck" returns true, which should allow the form to be submitted. When it returns false, the error message below the field will show up and the form will be invalid.

HTML

    <form-input icon="fa-key fa-fw">
        <input type="password" name="password" ng-model="newUser.password" 
          placeholder="Password" ng-minlength="6" strength required/>
    </form-input>
    <form-input icon="fa-key fa-fw">
        <input type="password" name="confirmPassword" 
             ng-model="newUser.confirmPassword" 
              placeholder="Retype Password" required pwcheck="newUser.password" />
    </form-input>
    <span ng-show="registrationForm.confirmPassword.$dirty">
        <span ng-show="registrationForm.confirmPassword.$error.pwCheck">
            Confirmation password is required, and must match.
        </span>
    </span>

As far as I know, this should be working. I followed the plan laid out by Scott pretty closely, and I don't see any flaws in the logic of my code. I am using v1.2.28 of AngularJS, maybe that version doesn't support something I am doing.

Does anyone see what is wrong?

Thanks! Zach

Answer 1

pwcheck should be pw-check in your markup.

<input type="password" name="confirmPassword" 
             ng-model="newUser.confirmPassword" 
              placeholder="Retype Password" required pw-check="newUser.password" />