Password matching in AngularJS using the $validators pipeline produces unexpected results

Question

See the example here.

Using the $validators pipeline, I am trying to check that a field contains the same value as another field.

Each input in this example is associated with the other, such that the expected result is as follows:

Enter a value in input#1
Enter same value in input#2
Both fields should now be valid
Alter the value in input#1
input#1 should be invalid (or input#2 or both)

Initially, I did this using a $watch on both the current model and the target to be equal to, so only one of the two fields needed to use the directive. However, with the introduction of the $validators pipeline, this method stopped working unexpectedly (maybe a bug).

Anyhow, as you can see, when the second input is altered, the value is receives for the associated input is undefined.

Solution

I solved this by the following:

JSFiddle

As Nikos said, the two instances were cancelling each other out, so this was fixed by the following code:

$scope.$watch('passwordWatch', function(pass) {
    $control.$validate();
});

So now, when the target input changes, the current input revalidates. When the current input changes, it validates automatically (as usual).

Nikos Paraskevopoulos · Accepted Answer · 2014-06-24 13:04:04Z

1

One problem is that when a validator fails (returns false), then the underlying model value is set to undefined. So:

You type something in the password, say "aaa"; this is NOT the same as passwordConfirm, so the validator returns false and the model gets the undefined value
You type the same value in passwordConfirm; but from above the value of the password is undefined and undefined !== "aaa", so the passwordConfirm validator returns false too.
And so on...

answered Jun 24, 2014 at 13:04

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

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

3 Comments

JJJ Over a year ago

haha i completely overlooked that. the documentation on the $validators pipeline is lacking currently so i was unaware it did that. any suggestion as to how this should be done then?

Nikos Paraskevopoulos Over a year ago

:) Actually I tried tweaking the fiddle, but it seems a bit more complex than just tweaking or I am doing something wrong. Hopefully I will get back to this later. What I am trying to do is use the classic $parsers/$formatters instead of the $validators. The $parsers/$formatters allow you to return a value, even if the input is invalid, so the model can still (?) be updated and then the next check potentially succeed.

JJJ Over a year ago

check out my edit in the main question. i got it working currently by only listening on one of the two inputs and revalidating when the target changes.

Collectives™ on Stack Overflow

Password matching in AngularJS using the $validators pipeline produces unexpected results

Solution

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Solution

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related