Angular Validation $parsers

Question

Angular Validation $parsers

When we have a controller or ng-model-controller we can do

ctrl.$parsers.push(function(viewValue){ 
    ctrl.$setValidity('valid', true); 
});

and in the end $digest is called automatically and validation renders. What if I want to validate a field on blur. and I do

element.blur(function(){ 
    [validations]
    ctrl.$setValidity('valid', false); 
})

and the result don't change on html with elements ng-binded, how to render this change?

validation
angularjs

Answer 1

You have to call ctrl.$setValidity('valid', false); within scope.$apply

scope.$apply(function(){
    ctrl.$setValidity('valid', false); 
})

Answer 2

Or better yet, in order to avoid problems further on, use CSS to solve this problem. Let's assume the following code:

<textarea ng-model="description" ng-minlength="50"></textarea>
<span class="error" ng-show="myform.$error.minlength">Too short!</span>
<span class="error" ng-show="myform.$error.someOtherValidation">Err!</span>

When you start typing, Angular starts validation, and errors appear (which is sometimes desirable, but more often, it's not).

What you can do in order not to mess up Angular's internals, is some CSS magic:

textarea:focus ~ .error {
  display:none;
}

The tilde is a general sibling selector, so as long as you have your fields focused all your errors will stay hidden.