Получить доступ к ошибкам проверки контроллера формы в пользовательской директиве

Question

У меня есть директива, которая обертывает элемент form с некоторыми входами. Один из вариантов проходит через formName. Обычно, с формой с примером name myForm, чтобы показать ошибку, вы сделали бы что-то вроде myForm.firstName.$error.required.

Но как получить доступ к ошибкам, когда имя формы динамически передается в директиву?

пример использования

<my-custom-form formName='myForm' formSubmit='parentCtrl.foo()'></my-custom-form> 

директива

angular.module('example') 
    .directive('myCustomForm', [ 
     function() { 
     return { 
      restrict: 'E', 
      replace: true, 
      templateUrl: 'myCustomForm.directive.html', 
      scope: { 
      fornName: '@', 
      formSubmit: '&' 
      }, 
      require: ['myCustomForm', 'form'], 
      link: function(scope, element, attrs, ctrls) { 
      var directiveCtrl = ctrls[0]; 
      var formCtrl = ctrls[1]; 

      scope.data = {}; 

      scope.hasError = function(field) { 
       // how do i show the errors here? 
      }; 

      scope.onSubmit = function() { 
       scope.formSubmit(); 
      }; 
      } 
     }; 
     }]); 

шаблон

<form name="{{ formName }}" ng-submit="onSubmit()" novalidate> 
     <div class="form-group" ng-class="{'is-invalid': hasError('fullName') }"> 
     <input type="text" name="fullName" ng-model="data.full_name" required /> 
     <div ng-show="hasError('fullName')"> 
      <p>How do I show this error?</p> 
     </div> 
     </div> 

     <div class="form-group" ng-class="{'is-invalid': hasError('email') }"> 
     <input type="text" name="email" ng-model="data.email" ng-minlength="4" required /> 
     <div ng-show="hasError('email')"> 
      <p>How do I show this error?</p> 
     </div> 
     </div> 

     <button type="submit">Submit</button> 
    </form> 

Answer 1

Я думаю только про blem с вашим кодом - это то, что сама директива требует, я не думаю, что это сработает. Просто удалите myCustomForm из требований, необходимых для работы.

Чтобы проверить, есть ли в поле ошибки, вам просто нужно проверить, нет ли объекта $error в контроллере формы.

require: ['form'], 
    link: function(scope, element, attrs, ctrls) { 
    var formCtrl = ctrls[0]; 

    scope.data = {}; 

    scope.hasError = function(field) { 
     // Field has errors if $error is not an empty object 
     return !angular.equals({}, formCtrl[field].$error); 
    }; 

Plunker: http://plnkr.co/edit/3zPiFpwdXSO0rCkOldlv?p=preview