AngularJS: Cannot access form field errors from a directive

Question

LIVE DEMO

I use Angular 1.2.18 (have to support IE8), and I'm trying to create something similar to ngMessages that exists in Angular 1.3:

HTML:

<form name="form" novalidate>
  <div>
    <label for="phone">Phone:</label>
    <input id="phone" name="phone" ng-model="phone" type="text" 
           required ng-minlength="5">
    <div form-errors-for="form.phone">
      <div form-error="required">Required</div>
      <div form-error="minlength">Too short</div>
    </div>
  </div>
</form>

JS:

angular.module("Validation", [])
.directive("formErrorsFor", function() {
  return {
    scope: {
      model: '=formErrorsFor'
    },
    controller: function($scope) {
      this.model = $scope.model;
    }
  };
})
.directive("formError", function() {
  return {
    require: '^formErrorsFor',
    link: function(scope, element, attrs, ctrl) {
      console.log(ctrl.model.$error); // Always {}. Why??
    }
  };
});

Unfortunately, accessing form.phone.$error from the formError directive, always results in an empty object. Why it doesn't have the required and the minlength properties?

PLAYGROUND HERE

Answer 1

I tried you jsbin. The issue here is you are trying to access errors too early. Also the scope on the two directives are different.

I changed you jsbin and it seems to work. I added a watch

 scope.$watch(function(){
        return ctrl.model.$error;
      },function(n,o){
        console.log(n);
      });

for error changes as it s not defined on scope. See this http://jsbin.com/duxewigi/3/edit