2

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

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

我的问题是，在不创建某种自定义指令的情况下，这是否可能在角度上实现？另一种解决方案是预先为每个下拉选择输出所有可能的文本元素，并使用基于下拉选择的 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/

4

2 回答 2

0

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

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);
        }
    }
}]);
于 2014-01-09T00:14:20.140 回答
0

正如在另一个 Stack Overflow 问题中提到的，当前的 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>

小提琴代码：http: //jsfiddle.net/kBVR2/61/

于 2014-01-07T22:51:07.110 回答