AngularJS directive watch validity

Question

I try to create a directive which should peform some actions when an input field is marked as invalid. For this example lets assume I have a directive which checks if the input is a prime number, and I want to create a directive which adds a class to the element when it's invalid:

<input type="text" ng-model="primeNumber" validate-prime invalid-add-class="error"> 

The validate-prime uses the parsers and formatters on ng-model to update the validity of the model.

Now I want the invalid-add-class directive to add the class "error" when the model is invalid, and to remove it when it is valid. In other words, it should watch the $valid (or $invalid) property of the model controller. However, I can't figure out how to get this working. I tried:

link : function(scope, element, attrs, ctrl) {     ctrl.$watch("$valid", function(newVal, oldVal) {     //never fired     }); } 

Perhaps I could watch some variable on scope, but I don't know which variable to watch for.

So how can I be notified when the validity of a model changes?

Answer 1

If you have a <form>, add a name to it (lets assume 'myForm') and a name to your input (lets assume myInput). You should be able to $watch this by:

scope.$watch('myForm.myInput.$valid', function(validity) {}) 

If you don't have a form, you can always watch a function. This way:

scope.$watch(function() { return ctrl.$valid; }, function(validity){}); 

You can read more about the form approach here.

Answer 2

If you do not have a <form />you can easily get one:

In your directive definition:

require: '^form' 

and then in your link function, the form is passed as the fourth parameter:

    link: function (scope, element, attr, ctrl) { 

Now you don't have to hard-code the form or the input field to perform the $watch:

 scope.$watch(ctrl.$name + '.' + element.attr('name') + '.$valid',   function (validity) {});