I am currently working on creating a custom directive to manage form input errors. Here is what I have so far:
directive('input', function() {
return {
restrict: 'E',
scope: true,
link: function (scope, element, attrs, ctrls) {
var name = attrs.name;
scope.$watch(attrs.ngModel, function () {
console.log(name + ' has changed');
});
}
};
});
And in the HTML:
<input type="text" ng-model="data.text">
This setup allows me to monitor any form errors within the $watch callback.
However, there seems to be an issue with input[type="email"] fields that also have a required attribute. I cannot seem to determine why the $watch callback does not fire in this scenario.
To illustrate this problem with different input components, here is an example: http://jsfiddle.net/g0atq0z4/
Does anyone have any suggestions on how to detect changes in ngModel in this specific case?