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 w…

Accepted Answer

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.

AngularJS directive watch validity

Solution

Problem