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

我有一个下拉列表，可以动态生成任意数量的文本输入，所有文本输入都有不同的验证规则（最小/最大长度、模式等）。根据其他几个stackoverflow问题，即（），使用ng表单模块可以使用动态验证创建动态表单元素

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

我的问题是，这在angular中是否可能，而不创建某种自定义指令？另一种解决方案是只在前面输出每个下拉选择的所有可能文本元素，并使用基于下拉选择的ng show off来显示/隐藏每个集合。但我希望保持模板干净，并使用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和完整示例：

如中所述，使用当前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 = {};
}]);

validationApp.controller（'ValidationCtrl'，['$scope'，函数（$scope）{
$scope.chkLength=函数（i）{
$scope.minBad[i]=（$scope.text[i].length<$scope.choice.validation[i].minLength）；
};
$scope.minBad={}；
}]);

HTML:

输入文本
最小{{rules.minLength}}个字符
请输入最小字符数。

---

Fiddle代码：

不幸的是，看起来不可能使用内置的验证指令，所以正如其他人所建议的，我实现了一个自定义指令

validationApp.directive('myMinlength', [function() {
    return {
        require: 'ngModel',
        scope: {
            myMinlength: '@',
            ngModel: '='
        },
        link: function(scope, elem, attrs, ctrl) {
            var minLengthValidator = function(value) {
                if (attrs.myMinlength) {
                    var minlength = attrs.myMinlength;
                    if (!ctrl.$isEmpty(value) && value.length < minlength) {
                        ctrl.$setValidity('myMinlength', false);
                    } else {
                        ctrl.$setValidity('myMinlength', true);
                    }
                } else {
                    ctrl.$setValidity('myMinlength', true);
                }
            };

            // validate when minlength attr changes
            scope.$watch('myMinlength', function() {
                minLengthValidator(scope.ngModel);
            });

            // validate when model changes
            scope.$watch('ngModel', minLengthValidator);
        }
    }
}]);

validationApp.directive（'myMinlength'，[function（））{
返回{
要求：'ngModel'，
范围：{
myMinlength:“@”，
ngModel:“=”
},
链接：函数（范围、元素、属性、ctrl）{
var minLengthValidator=函数（值）{
if（属性myMinlength）{
var minlength=attrs.myMinlength；
如果（！ctrl.$isEmpty（value）&&value.length

谢谢J.P.的建议，这当然是一个选择。我最终实现了一个自定义指令，该指令监视模型并获取当前的minlength设置进行验证。

validationApp.directive('myMinlength', [function() {
    return {
        require: 'ngModel',
        scope: {
            myMinlength: '@',
            ngModel: '='
        },
        link: function(scope, elem, attrs, ctrl) {
            var minLengthValidator = function(value) {
                if (attrs.myMinlength) {
                    var minlength = attrs.myMinlength;
                    if (!ctrl.$isEmpty(value) && value.length < minlength) {
                        ctrl.$setValidity('myMinlength', false);
                    } else {
                        ctrl.$setValidity('myMinlength', true);
                    }
                } else {
                    ctrl.$setValidity('myMinlength', true);
                }
            };

            // validate when minlength attr changes
            scope.$watch('myMinlength', function() {
                minLengthValidator(scope.ngModel);
            });

            // validate when model changes
            scope.$watch('ngModel', minLengthValidator);
        }
    }
}]);