角度形式验证 - 最小元素不能大于最大元素

Question

我的范围输入中有一些简单的验证，如下所示：

    <form name="form" novalidate>
    Min: <input type="number" name="min" ng-model="rangemin" ng-pattern="/^[0-9]+$/">
    Max: <input type="number" name="max" ng-model="rangemax" ng-pattern="/^[0-9]+$/">
    </form>

我在CSS中添加了类ng-valid（绿色）和ng-invalid（红色），以便正确绘制，并将输入保存在ng-model变量中。这很好，但我想做一些额外的验证。如果最小值大于最大值或最大值低于最小值，则输入不应有效。

我该如何做到这一点

我是Angular的新手，我可以制作指令、控制器等，但我不知道如何验证两个输入并设置它们的无效状态。

Answer 1

您可以使用html属性min和max以及字段中的模型值，如下所示：

<form name="form" novalidate>
Min: <input type="number" name="min" ng-model="rangemin" ng-pattern="/^[0-9]+$/" max="{{rangemax || 9999}}">
Max: <input type="number" name="max" ng-model="rangemax" ng-pattern="/^[0-9]+$/" min="{{rangemin || 1}}">
</form>

然后显示错误消息的条件可以是：（form.min.$error.max||form.max.$error.min）&amp；（form.min.$dirty|| form.max.$dirty）.

Answer 2

您可以手动为角度形式的$error对象编写内容。您可以编写自己的自定义验证（可能使用指令），并将验证附加到控制器的$validators属性（就像给定的客户验证示例中一样）。

app.directive('customValidation', function() {
    return {
        require: 'ngModel',
            link: function(scope, elm, attrs, controller) {
                controller.$validators.customValidation = function () {
                     //your validation here
                     return isValid;
                }
    ...

你只需要在类似的HTML中使用这个指令

<form name="form" novalidate>
Min: <input type="number" name="min" ng-model="rangemin" custom-validation ng-pattern="/^[0-9]+$/">
Max: <input type="number" name="max" ng-model="rangemax" custom-validation ng-pattern="/^[0-9]+$/">
</form>

或者，（这有点麻烦）你可以手动观察和设置$error对象，就像一样

$scope.$watch('rangemin', function() {
    if ($scope.rangemin > $scope.rangemax)
        $scope.form['rangemin'].$error.customerValidation = true; //an error exists
});

Answer 3

我认为这是的一个好方法

http://jsfiddle.net/jhebr7z8/

但是你需要使用那些指令

app.directive('ngMin', function () {
app.directive('ngMax', function () {