Javascript 如何在angularjs表单中添加数组大小验证规则？

我有一个表单，其中包含一些文本输入字段和存储在控制器的$scope中的动态项目列表，以及一些用于添加/删除列表中项目的函数。 我想使表单失效，直到项目列表达到预定义的长度

因此，我创建了一个formRepeat指令，它接受一个ngModel属性，然后使用ngModelController使表单无效

这是可行的，但我认为这不是更好的方法，因为指令不是很灵活

最简单的方法是使用以下命令使控制器中的表单无效：

$scope.myForm.$valid = false;

但这不起作用

---

有更好的方法吗？

也许这就是你想要的

我认为在这种情况下没有必要使用指令。只需在你的控制器内对物品进行ng重复

$scope.$watch('items', function(val){
    if(val.length<5){
        //$scope.myForm should be available here
        $scope.myForm.setValidity('$valid');
        //add additional form validation ($dirty, setting back to $invalid, etc...)
    }
})

$scope.$watch（'items'，函数（val）{
如果（val.length我认为您可以使用ng类实现这一点

试试这个，
在HTML中，

你想要这样的东西吗

请稍晚一点再看一下，但我是这样做的：

<button type="button" class="btn btn-success" 
        ng-disabled="form.$invalid || user.groups.length == 0>
        Submit
</button>

angular.module('directiveTest', []).directive('minLength', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ngModel) {
  scope.minlength = attrs.minLength || 1;
  ngModel.$validators.minLength  = function(modelValue){
    /* Assume TRUE when empty, as ngRequired should be used for mandatory values */
    return (ngModel.$isEmpty(modelValue)) ? true : (modelValue.length >= scope.minlength);
  };
}
};
});

<input type="text" name="content" ng-list min-length="2" ng-model="content" />

基于您的。我将使用以下
$watch
功能（类似于@nicolanoise response）

将
objectEquality
标志设置为
true
非常重要，这样当任何对象属性发生更改时，
$watch
将触发

或者，如果仅进行了浅表列表（集合）比较，请使用
$watchCollection

$scope.$watchCollection('items', function (items) {
    $scope.myForm.$setValidity('count', items.length >= 5);
});

我还从来没有使用过
$setValidity（'$valid'）
或类似的这样做的最佳方法（IMO）是创建一个使用

每次模型更新时都会执行验证器，并用于表单有效性。
您的指令可能如下所示：

<button type="button" class="btn btn-success" 
        ng-disabled="form.$invalid || user.groups.length == 0>
        Submit
</button>

angular.module('directiveTest', []).directive('minLength', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ngModel) {
  scope.minlength = attrs.minLength || 1;
  ngModel.$validators.minLength  = function(modelValue){
    /* Assume TRUE when empty, as ngRequired should be used for mandatory values */
    return (ngModel.$isEmpty(modelValue)) ? true : (modelValue.length >= scope.minlength);
  };
}
};
});

<input type="text" name="content" ng-list min-length="2" ng-model="content" />

可以从HTML中调用它，如下所示：

<button type="button" class="btn btn-success" 
        ng-disabled="form.$invalid || user.groups.length == 0>
        Submit
</button>

angular.module('directiveTest', []).directive('minLength', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ngModel) {
  scope.minlength = attrs.minLength || 1;
  ngModel.$validators.minLength  = function(modelValue){
    /* Assume TRUE when empty, as ngRequired should be used for mandatory values */
    return (ngModel.$isEmpty(modelValue)) ? true : (modelValue.length >= scope.minlength);
  };
}
};
});

<input type="text" name="content" ng-list min-length="2" ng-model="content" />



您可以在下面找到工作示例。
对我来说，最简单的方法是将数组的长度作为隐藏数
输入
，并在其上进行
min
验证。事实上，这是一个非常干净的解决方案

<input style="display: none;" type="number" name="itemsCount" ng-model="items.length" min="{{min}}">



查看
也许我遗漏了什么，但似乎我们只能使用表单控制器使表单控件无效，而不能使用表单本身（setValidity仅对表单控件有效）。问题是，我使用ng repeat为作为数组存储在作用域中的动态列表生成DOM，因此没有任何可以使用FormController的表单控件。$scope.myForm应该在您的控制器中可用。但是，恐怕您无法访问inside指令（您自己的自定义或inside ng repeat）您还可以为整个表单设置有效性，但不确定它在发生冲突时如何反应。请在此处尝试。这样做没有任何作用，如果替换“”，则在添加5项后确实会使表单无效…我将“$valid”替换为“$invalid”，没有得到任何好的结果。经过一些思考，我认为这不是一个好主意在控制器中创建窗体本身，因为它将“隐藏”所有其他输入字段验证规则…谢谢。它正在工作，但这只是一个视觉技巧。我尝试做的是让窗体本身意识到有问题，就像任何其他窗体错误一样。谢谢。它正在工作，但它只是一个视觉技巧，就像其他答案一样。我尝试的是o是让表单本身意识到某些错误，就像任何其他表单错误一样（输入大小错误、电子邮件格式错误……）。创建一个新的“错误密钥”似乎是处理此问题的最干净的方法。谢谢！如何将其转换为自定义验证器？这有一个问题：当数组长度从控制器减少到零时，数组实例实际上被删除。此答案简单、优雅且易于实现-需要添加“必需”属性.