Problems with password matching with Angular Auto Validate

Question

Trying to integrate Angular Auto Validate's password matching/confirmation example into a form. I'm not getting any errors but the password matching code is not kicking in. What's the simplest way to fix this? What am I doing wrong?

Here's a plunkr of my code

Here's the password matching code I'm trying to integrate:

function ConfirmPasswordValidatorDirective(defaultErrorMessageResolver) {
  defaultErrorMessageResolver.getErrorMessages().then(function (errorMessages) {
      errorMessages['confirmPassword'] = 'Please ensure the passwords match.';
    });

    return {
        restrict : 'A',
        require : 'ngModel',
        scope : {
            confirmPassword : '=confirmPassword'
        },
        link : function(scope, element, attributes, ngModel) {
            ngModel.$validators.confirmPassword = function(modelValue) {
                return modelValue === scope.confirmPassword;
            };

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

ConfirmPasswordValidatorDirective.$inject = [
  'defaultErrorMessageResolver'
];

Here's a plunkr of angular-auto-validate's password matching code working.

There are a lot of posts / ready directives to do this, look this for example: stackoverflow.com/questions/14012239/… — developer033
– developer033, Commented Jul 13, 2016 at 23:33
Thank you, I don't feel that addresses the specific issues in the above post using Angular Auto Validate. — Agent Zebra
– Agent Zebra, Commented Jul 13, 2016 at 23:36
True, I didn't notice you're using a module since you didn't put it specifically. — developer033
– developer033, Commented Jul 13, 2016 at 23:38

developer033 · Accepted Answer · 2016-07-13 23:53:47Z

1

Well, at first you forgot to call the directive in your view, so you should include it in your confirmPassword <input>:

confirm-password="formModel.password"

Also you haven't declared the directive in your JS file:

app.directive('confirmPassword', ConfirmPasswordValidatorDirective);

Look: DEMO

answered Jul 13, 2016 at 23:53

developer033

25k8 gold badges85 silver badges113 bronze badges

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

2 Comments

Agent Zebra Over a year ago

Thank you fantastic. Ah " see, scope : { confirmPassword : '=confirmPassword' }, was not reflected in the confirmPassword <input> Just one question so I can understand: why did you remove class="control-label" on the password labels?

developer033 Over a year ago

Hmm, maybe, I copied the fields of their plnkr :), but you can just do these modifications above on your plnkr and it will works.

Collectives™ on Stack Overflow

Problems with password matching with Angular Auto Validate

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related