angularjs - 针对 angularjs 中的数组长度的自定义验证器

Question

我正在尝试编写一个自定义验证器require-items，它将根据范围内数组的长度为input表单字段生成有效/无效...在本例中skillTags

<input
    type="text"
    name="tags"
    ng-model="newTag"
    class="form-control"
    placeholder="Enter tags: (eg. JavaScript, HTML5)"
    ng-keyup="search($event)"
    ng-focus="search($event)"
    ng-class="{ 'has-results': matches.length }"
    require-items="{{skillTags.length}}"
    mongoose-error>



//custom validator not working
'use strict';

angular.module('offsiteApp')
    .directive('requireItems', function (){
        return {
            require: 'ngModel',
            link: function(scope, elem, attr, ngModel) {
                var len = parseInt(attr.requireItems);

                //For DOM -> model validation
                ngModel.$parsers.unshift(function(value) {
                    var valid = len ? true : false;

                    ngModel.$setValidity('require-items', valid);
                    return valid ? value : undefined;
                });

                //For model -> DOM validation
                ngModel.$formatters.unshift(function(value) {
                    var valid = len ? true : false;

                    ngModel.$setValidity('require-items', valid);
                    return value;
                });
            }
        };
    });



<p class="help"
   ng-show="form.tags.$error['require-items'] && submitted">
    Skill tags are required.
</p>

Answer 1

我从来没见过$formatters和$parsers用于验证。据我所知，它们只能用于它们的名称。

通常，要验证，您需要连接到 $validators - 这将在模型或 View 值发生变化时运行。

但是在您的示例中，您的验证甚至不依赖于输入 - 所以我想知道为什么您甚至会在这里使用验证。

无论如何，由于你不关心输入，所以你只需要观察属性值和$setValidity的变化即可。因此:

.directive("requireItems", function(){
  return {
    require: "?ngModel",
    link: function(scope, element, attrs, ngModel){
      if (!ngModel) return;

      attrs.$observe("requireItems", function(){
        var val = parseInt(attrs.requireItems);
        ngModel.$setValidity("require-items", !!val);
      });
    }
  }
});