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 - 这将在模型或视图值更改时随时运行。

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

在任何情况下，由于您不关心输入，您只需要观察属性值的变化并相应地$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中数组长度的自定义验证器

1 个答案: