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

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

我认为您的代码的唯一问题是指令需要自身，我认为这不会起作用。只需从 require 中删除 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