Validating form with dependent fields in AngularJS

Question

I have an object that has 2 fields, and 1 must be less than or equal to another.

Say the hard disk quota settings, and I need the threshold be less than or equal to the HDD size .

I am trying to use angular ui-utils # validate .

Here's how I got so far: http://embed.plnkr.co/EysaRdu2vuuyXAXJcJmE/preview (hope the link works)

The problem I am facing is that it works in one direction:

Setting size and then playing with threshold works fine

But if I try to change the size , after the threshold is in an invalid state, nothing will happen. This is due to the fact that an invalid threshold not set for the model and the size id is compared to null or undefined (or something like that).

On the one hand, I understand the logic of not setting an invalid value for the model ... but here it bothers me.

So, any help in this work will be appreciated.

Answer 1

I played with custom directives and prepared something that works for my business.

At my input for threshold , I have a less-than-or-equal="quota.size" that passes it the model property for verification (I want quota.threshold be less than or equal to quota.size ):

 <input type="number" name="threshold" ng-model="quota.threshold" required less-than-or-equal="quota.size" /> 

In the link function of the lessThanOrEqual directive lessThanOrEqual he starts looking at quota.size , and when quota.size changes, he simply tries to set the current value of the threshold view on the model:

 link: (scope, elem, attr, ctrl) -> scope.$watch attr.lessThanOrEqual, (newValue) -> ctrl.$setViewValue(ctrl.$viewValue) 

Then there is a parser that validates by calling the scope.thresholdValidate(thresholdValue) method, passing it a candidate value. This method returns true if the test was successful, and if it happens, it returns a new value, otherwise - the current value of the model:

  ctrl.$parsers.push (viewValue) -> newValue = ctrl.$modelValue if not scope.thresholdValidate viewValue ctrl.$setValidity('lessThanOrEqual', false) else ctrl.$setValidity('lessThanOrEqual', true) newValue = viewValue newValue 

I push the parser to the parser compilation, as opposed to turning it off, as most examples show, because I want angular to check the required and number directives, so I can only get here if I have a valid and parsed number (less work for me, but for text inputs, I probably should parse)

Here is my playground: http://embed.plnkr.co/EysaRdu2vuuyXAXJcJmE/preview

Answer 2

Better late than never, you need to add ng-model-options="{allowInvalid:true}" to the form input elements to stop this: the problem is that when the promise is rejected (for example, using $q or $http ), the default model is not updated. Crazy yes! Spend me on it working on it.

I wrote plunkr specifically for this problem - Believe me, this code is good ... http://embed.plnkr.co/xICScojgmcMkghMaYSsJ/preview