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

Question

我正在尝试编写一个自定义验证器 require-items，它将根据范围内数组的长度为 input 表单字段生成 valid/invalid...这种情况 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 - 这将运行随时更改模型或视图值。

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

无论如何，既然你不关心输入，你只需要观察属性值的变化并$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);
      });
    }
  }
});

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

custom validator against an array length in angularjs

angularjs

angularjs-directive