javascript - 如何使用 ng-repeat 和使用 ng-form 创建的动态表单元素验证动态规则？

Question

我有一个下拉菜单，可以动态生成任意数量的文本输入，所有这些都有不同的验证规则(最小/最大长度、模式等)。根据其他几个 stackoverflow 问题，即。 ( How to validate inputs dynamically created using ng-repeat, ng-show (angular) ) 使用 ng-form 模块可以让您创建具有动态验证的动态表单元素。

我已经这样做了，但问题是当根据下拉列表中的选择更改文本字段的数量时，验证规则不会相应更新。例如，第一个下拉选项将生成 1 个文本输入，最小长度为 3。第二个选项也可能生成 1 个文本输入，但它的最小长度将为 1。即使最小长度规则为 1，angular 最终会验证最小长度共 3 个，来自原始选择的文本字段。

我的问题是，这是否可以在不创建某种自定义指令的情况下以 Angular 形式实现？另一种解决方案是预先为每个下拉选择输出所有可能的文本元素，并使用基于下拉选择的 ng-show 来显示/隐藏每个集合。但我想保持模板干净并使用 ng-repeat 动态生成它们，就像我已经在做的那样。

我设置了一个最小的例子:

var validationApp = angular.module('validationApp', []);

validationApp.controller('ValidationCtrl', ['$scope', function($scope) {
    $scope.textChoices = [
        { label: "1 line", validation: [ { minLength: 3 } ] },
        { label: "2 lines", validation: [ { minLength: 1 }, { minLength: 3 } ] },
        { label: "3 lines", validation: [ { minLength: 2 }, { minLength: 2 }, { minLength: 3 } ] }
    ];
    $scope.choice = $scope.textChoices[0];
    $scope.text = [];
}]);

请在此处查看 html 和完整示例:http://jsfiddle.net/anpsince83/kBVR2/

Answer 1

如 other Stack Overflow question 中所述目前的 AngularJS 表单验证是不可能的。但是这里有一个使用 ngChange 的方法:

AngularJS:

validationApp.controller('ValidationCtrl', ['$scope', function($scope) {
$scope.chkLength = function(i) {
    $scope.minBad[i] = ($scope.text[i].length < $scope.choice.validation[i].minLength);
};
$scope.minBad = {};
}]);

HTML:

        <ng-form name="textForm">
            <label>Enter Text</label>
            <input type="text"
                   name="text"
                   ng-model="text[$index]"
                   ng-change="chkLength($index)">

            Min {{ rules.minLength }} Chars

            <div class="error" ng-show="minBad[$index]">
                <small>Please enter min amount of characters.</small>
            </div>
        </ng-form>

fiddle 代码:http://jsfiddle.net/kBVR2/61/