Question

I use ctrl.$setValidity within one of my directives to invalidate a form. However, there is a method residing elsewhere which could remove this element from the DOM under a different set of conditions. What happens when I invalidate the form with $setValidity and then remove the offending element is that the form remains invalid, while what I would like it to do is to recalculate its validity based on its new Inputfield set.

Please note that I am not simply looking for a ctrl.$setValidity true, (other input fields in the form may or may not be valid), I simply want the form to recalculate.

Below is the directive code:

 app.directive('dir', function() {
   return {
      restrict: 'C',
      require: "ngModel",
      link: function(scope, element, attrs, ctrl) {
      someValue = scope.someValue;
      someField = element.find(".some-class");

      monitorField = function(newValue, oldValue){
        console.log("whee");
        scope.someFunction(newValue);
        if(newValue =="Invalidate NOW!"){
        ctrl.$setValidity('someClass', false);      
        } else if (oldValue == "Invalidate NOW!"){
           angular.element(document.querySelector('.some-class')).remove();
        } else {
          ctrl.$setValidity('someClass', true); 
       }
    }  
    scope.$watch("someValue", monitorField, true);
   }
 }
});

Which operates on:

   <FORM class="dir" ng-model="someValue">
     <INPUT type="text" class="some-class" ng-model="someValue"/>
     <INPUT type="text" class="some-other-class"/>
   </FORM>

(Yes it is a somewhat contrived example).

The problem is reproduced here: http://jsfiddle.net/kTuAY/

In my actual code, I populate the input fields based on an array of objects, which gets populated via Service, and remove elements via array.splice. The example given in the jsfiddle is merely there for simplicity.

Another interesting condition of failure can be seen in this fiddle:

http://jsfiddle.net/JACAv/

Specifically, if one of the inputs depends on non collision of value with the other, and is thusly invalidated, whereafter the other fields value is changed, validity remains incorrect.

Temporary not quite functioning fiddle while I go to work:

http://jsfiddle.net/yQpHL/

Thanks!

Answer 1

The way I ended up solving this was:

1. Put a separate watch expression on the array being ng-repeated over.
2. Within that watch expression, construct a hash of all the values currently present in input fields that match the relevant directive.
3. Reset the value of those fields forcefully with .val(), and then call $compile on the inner fields to retrigger the inner watch expression
4. Within the function adding the input field values on the controller (the function that gets called just before ctrl.$setValidity from the inner directive:
   • Verify that he number of times the value is entered is 1
   • Reset the array being ng-repeated over to contain the values of the hash

The good:

• When an element is removed,the outer watch (the one on the entire array) triggers, the hash is recomputed, the values of each field are reset and revalidated
• When a collision is detected, it will bubble correctly, marking all colliding fields as invalid, when the collision is removed, all fields are re-validated

The bad:

• Calling $compile on every field every time the array changes is computationally inefficient
• As the inner watch expression will trigger once when the value changes, and once when the outer watch expression calls compile, effectively the number of $digest‘s is doubled

I’ll put together a code example just as soon as I sanitize the code.