在Angular中的元素指令上创建自定义表单验证器？答案

【问题标题】：Creating a custom form validator on an element directive in Angular?在Angular中的元素指令上创建自定义表单验证器？
【发布时间】：2015-09-03 10:22:08
【问题描述】：

我有一个tags Angular 元素指令，它的操作与 Stack Overflow 自己的“标签”输入字段非常相似，用于此处的问题。

我想验证tag 元素上的ng-model 属性是一个包含至少一个标签且少于十个标签的数组。但是，我不想创建单独的指令来验证这一点，因为我永远不需要再次验证数组的长度。我希望逻辑自包含在元素指令中。

这是我目前所得到的：

angular.module("directives.tags", []).directive("tags", ["Tag", "$timeout", function(Tag, $timeout) {
return {
    require: 'ngModel',
    restrict: 'E',
    scope: {
        availableTags: '=',
        selectedTags: '=ngModel',
        placeholder: '@'
    },
    link: function($scope, element, attributes, ctrl) {

        // Snip

        ctrl.$validators.taglength = function(mv, vv) {
            return (mv.length > 0);
        }
    } 
}

我的指令是这样使用的：

<tags available-tags="data.tags" name="tags" ng-model="text.tags"></tags>
<span ng-show="writeForm.tags.$error.taglength">Invalid!</span>

但是，我的taglength 验证器不工作，或者我没有正确绑定它。有什么想法吗？

【问题讨论】：

您不应该在模板中使用selected-tags="usedTagsArray" 还是在指令范围中使用ngModel: '='？
我对 Angular 的了解不够，无法回答这个问题。
有点！但是您的答案仍然没有完全起作用。函数ctrl.$validators.ngModel 仅在页面加载时被调用一次。模型更改时不会再次调用它。为什么？
还有问题吗？

标签： javascript html angularjs validation

【解决方案1】：

在您的模板中，您需要引用元素 name，而不是控制器的 scope 中的变量。而且，在你的指令的隔离范围内，你可以使用普通的ngModel。

例如：

<body ng-controller="Ctrl">
  Tags: {{ usedTags | json }}
  <ng-form name="writeForm">
    <tags name="tags" 
          ng-model="usedTags" 
          available-tags="availableTags">
    </tags>
    <span class="valid" 
          ng-show="writeForm.tags.$valid">
          Valid!
    </span>
    <span class="invalid" 
          ng-show="writeForm.tags.$error.taglength">
          Invalid!
    </span>
  </ng-form>

  <button type="button" 
          ng-click="changeModel()">
          Change
  </button>
</body>

angular.module("directives.tags", [])
  .controller('Ctrl', function($scope) {
    $scope.usedTags = [];
    $scope.availableTags = ['a','b'];

    $scope.changeModel = function() {
      $scope.usedTags = $scope.usedTags.length === 0 ? ['a'] : [];
    };
  })
  .directive("tags", function() {
    return {
      require: 'ngModel',
      restrict: 'E',
      scope: {
        ngModel: '=',
        availableTags: '='
      },
      link: function(scope, element, attributes, ctrl) {
        ctrl.$validators.taglength = function() {
          return scope.ngModel.length > 0;
        };
      }
    }; 
  });

相关plunker在这里http://plnkr.co/edit/SiC8wk

【讨论】：