如何使用 min 和 max 属性（AngularJs）验证两个数字输入之间的范围答案

【问题标题】：How to validate range between two number inputs using min and max attributes (AngularJs)如何使用 min 和 max 属性（AngularJs）验证两个数字输入之间的范围
【发布时间】：2014-09-14 01:01:18
【问题描述】：

我在使用 AngularJs 验证“从-到”范围时遇到问题。这个想法是使表单只有在范围从小到大时才有效。

// Script.js
var app = angular.module('app', []);

app.controller('RangeController', function ($scope) {
    $scope.data = [];
    $scope.data.from = 1;
    $scope.data.to = 10;
});

// HTML
<body ng-app="app">

    <div ng-controller="RangeController">

        <form name="myForm">
            From: <input type="number" ng-model="data.from" min="0" max="{{ data.to-1 }}" required />
            To: <input type="number" ng-model="data.to" min="{{ data.from+1 }}" required />
        </form>

        myForm.$valid = {{ myForm.$valid }}

    </div>

</body>

要重现不良行为，请打开此 plunker，在“发件人”输入中输入 50，然后在“收件人”字段中输入 75。

考虑到“双向数据绑定”，我想知道为什么当我在“to”字段中输入 75 时，“from”输入和表单没有生效。

我搜索了一下，发现this讨论，但我不知道它是否真的与我的问题有关。

有教吗？

【问题讨论】：

因为在更改“To”的值之前“From”得到验证。如果更改第二个值“To”，“From”没有实现修改。
所以您是说它仅在该特定字段的值更改时才有效？我教过，因为“From”的“max”属性是“To”模型的值，它将得到验证。有没有办法以某种方式再次触发验证周期？

标签： angularjs validation input numbers

【解决方案1】：

是否可以只阻止用户输入任何内容？

只要让他们互相注视，当to 更改时设置另一个，或者如果from 更改设置to

http://plnkr.co/edit/UQCstPAo7mKgROMz8pEB?p=preview

app.directive('range',  function () {
    return {
        restrict: 'E',
        template: '' +
            '<div>' +
                'From: <input type="number" ng-model="from" />' +
                'To: <input type="number" ng-model="to" />' +
            '</div>',
        link: function ($scope, element, attrs) {
            $scope.$watch('from', function () { $scope.to = $scope.from + 1; });
            $scope.$watch('to', function () { $scope.from = $scope.to - 1; });

            $scope.from = 0;
        }
    };
});

【讨论】：

如果你想根据这个范围将表单设置为无效，那就另当别论了。