Fix broken ui-validate-watch for retroactive dependencies #472

Merged
merged 3 commits into from Mar 26, 2013

5 participants

@ovmjm

In the ui-angular-watch implementation we should not re-validate against the $modelValue but the $viewValue of the field since :

  1. this is what angular naturally does ;
  2. most of the time the $modelValue is undefined since angular values it if and only if the $viewValue is valid first.

The problem can be reproduced on the demo page by filling the passwordConfirmation first, and then the password. The passwordConfirmation stays invalid which is not expected.

The attached pull request fixes the problem by triggering again the natural angular validation process by simulating a change in the $viewValue

ctrl.$setViewValue(ctrl.$viewValue);

For instance, with this fix, the following cyclic five fields dependency schema works like a charm

A -> B -> C -> D -> E -> A
@ProLoser
AngularUI member

Since you are triggering the entire stack of validators there is no reason to have multiple watches, and since you have multiple watches there is no longer a reason to wrap the expression in a string and double evaluate it.

You should also update the tests and possibly add one for your patch

@ovmjm

String removed. Much simpler. Not backward compatible.
Tests updated.
Please ignore the commit 8c084ea: Fake version tag. Nothing to do with this issue.

@ovmjm

Any news about this issue ?

@inklesspen

I ran into this same issue today. Is there a temporary workaround while we wait for the pull request?

@ProLoser ProLoser merged commit b0d100b into angular-ui:master Mar 26, 2013

1 check passed

Details default The Travis build passed
@ProLoser
AngularUI member

The pull request IS the workaround.

@rintaun

This works great, thanks! One thing worth mentioning is that the model in the ui-validate-watch attribute must not be quoted as currently shown in the docs.

And one problem -- this method sets the field to dirty right off the bat, which can be problematic for styling.

@dmackerman

This isn't working for me in 1.2. I'm trying to verify that a specific field is less than another, and vice versa.

<input type="text" autocomplete="off" id="startDate" maxlength="4" name="startDate" 
  ng-model="education.startDate" 
  ui-validate="$value <= education.endDate"
  ui-validate-watch="education.endDate" required />

<input type="text" autocomplete="off" id="endDate" maxlength="4" name="endDate"
  ng-model="education.endDate" 
  ui-validate="$value >= education.startDate"
  ui-validate-watch="education.startDate" required />

Am I doing something wrong here?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment