AngularJS中的循环数字验证

Question

AngularJS中的循环数字验证

3

我目前正在处理一个看起来很普遍的问题，但我很难找到一种优雅的方式来处理它。这个问题归结为两个数字输入字段，其中一个字段必须小于另一个字段。为了实现这一点，我使用以下指令验证较低输入字段的输入，其中scope.maxThreshold是较高输入字段的输入：

testDirectives.directive('maxThreshold', function() {
    return {
        require: 'ngModel',
        link: function(scope, elm, attrs, ctrl) {
            ctrl.$parsers.unshift(function(viewValue) {
                if (viewValue > scope.maxThreshold) {
                    ctrl.$setValidity('thresholdTooHigh', false);
                    return undefined;
                } else {
                    ctrl.$setValidity('thresholdTooHigh', true);
                    return viewValue;
                }
            });
        }
    };
});

高输入字段的指令与比较开关非常相似。在用户在接收到验证错误后切换他们正在输入的字段之前，一切都很好。例如，如果较低的字段为5，而较高的字段为10，并且用户将较低的字段更改为15。现在该字段被标记为具有验证错误。现在，如果用户转到更高的输入字段并输入20，则用于该字段的指令会触发并且验证通过。问题是较低输入字段的有效性仍被标记为无效。如何处理，并使用用于更高输入字段的指令将较低输入字段标记为有效？谢谢。

- user1712917

你应该能够使用类似这样的东西：https://dev59.com/dnLYa4cB1Zd3GeqPaKVw - sirrocco

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Aaron · Accepted Answer

似乎问题在于检查输入的有效性时，事件不仅限于模型更改。换句话说，您还希望在条件更改时检查有效性。请参见指令：

这更接近您要寻找的内容。如果正在编辑最小字段，则似乎不想使最大字段无效。观察函数中的另一个检查可以完成此操作。

    .directive('highThreshold', function() {
    return {
        require: 'ngModel',
        scope: {
            'highThreshold': '='
        },
        link: function($scope, element, ctrl, ngModel) {
            $scope.$watch('highThreshold', function(){
                var isValid = ngModel.$modelValue < $scope.highThreshold;
                ngModel.$setValidity("highThreshold", isValid);
            });
            ngModel.$validators.highThreshold = function(value) {
                return value < $scope.highThreshold;
            };
        }
    };

})
.directive('lowThreshold', function() {

    return {
        require: 'ngModel',
        scope: {
            'lowThreshold': '='
        },
        link: function($scope, element, attrs, ngModel) {
            $scope.$watch('lowThreshold', function(){
                var isValid = ngModel.$modelValue > $scope.lowThreshold;
                ngModel.$setValidity("lowThreshold", isValid);
            });
            ngModel.$validators.lowThreshold = function(value) {
                return value > $scope.lowThreshold;
            };
        }
    };

});

http://jsfiddle.net/dn9prtxx/

很抱歉第一次没有理解问题 :) 希望这可以帮到你！