AngularJS 中的循环数字验证

Question

我目前正在处理一个似乎很常见的问题，但我很难找到一种优雅的方式来处理它。问题归结为两个数字输入字段，其中一个字段必须小于另一个字段。为此，我使用以下指令来验证低输入字段的输入，其中 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，则该字段的指令将触发并且验证通过。问题是下方输入字段的有效性仍然被标记为无效。处理此问题并将较低输入字段从用于较高输入字段的指令标记为有效的最佳方法是什么？谢谢。

Answer 1

似乎问题在于检查事件输入的有效性，而不是模型更改。即，如果条件发生变化，您还想检查有效性。见指令：

这更接近您正在寻找的内容。如果正在编辑最小字段，您似乎不知道如何使最大字段无效。在 watch 函数中的另一个检查可以完成。

    .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/

很抱歉第一次没有收到问题 :) 希望这会有所帮助！