访问自定义指令中的表单控制器验证错误

Question

我有一个指令，用一些输入来包装form元素。其中一个选项是通过formName。通常情况下，例如名称为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

我认为唯一的亲你的代码瑕疵是指令需要自己，我不认为这会起作用。从要求删除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