How to set watcher for input.$error object with directive in AngularJS

Question

I have a form that contain date inputs and select elements,
I tried to use ngChange but I found it not very useful when handling dates errors.
So I'm trying to set a watcher in a directive for every input.$error in order to display error message to the user.

my directive:

module.directive('validator', [function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, elem, attr, ctrl) {
      scope.input = ctrl;
      scope.$watch('input.$error', function() {
        console.log(scope.input);
      }, true);
    }
  }
}]);

The problem with the directive is that the scope.$watch fires only when an error object of dates is changing, and the scope.input of every input becomes similar to the ctrl of the changed date input.

JSFiddle

Answer 1

Update your directive to watch if the input is invalid

 module.directive('validator', [function() {
    return {
    restrict: 'A',
    require: '^form',
    link: function(scope, elem, attr, form) {

      var inputName = attr.name;
      console.log(inputName, form[inputName].$error)
      function watcherForRequired(){
       return form[inputName].$error.required;
      }
      function watcherForMin(){
       return form[inputName].$error.min;
      }
      scope.$watch(watcherForRequired, function(required) {
        console.log("required", required);
      })
      scope.$watch(watcherForMin, function(min) {
        console.log("min error", min);
      })
    }
  }

also update ng-min to min="{{loan.loaned}}"

here is JSFiddle

Answer 2

After deep checking of the directive behavior. I find out that the scope.input of the last element infect all the others scopes.
So I set the $watch to listen to ctrl.$error, and it solved the problem.

The directive:

module.directive('validator', [function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, elem, attr, ctrl) {
      scope.$watch(function() {return ctrl.$error}, function() {
        if (ctrl.$invalid) {
            console.log(attr.name, 'invalid');
        }
        else {
            console.log(attr.name, 'valid');
        }
      }, true);
    }
  }
}]);

Updated JSFiddle

Answer 3

You're doing this to display error messages? Why not simply do this in the template?

<form name="myform">
  <input ng-model="myform.model.user-name" name="user-name" id="my-form-user-name" />
  <div ng-messages="myform.user-name.$error">
    <p ng-if="myform.user-name.$invalid">My Error Message Here</p>
  </div>
</div>