Question

我正在处理一个表单，我希望有一些自定义验证规则，如：

字段2必须大于字段1
     如果字段2不是负数，则需要
字段3

...

HTML

<table>
<tr><th>Category</th><th> > </th> ≤ <th></tr>

<tr><td>Green</td>
    <td><input type="number" id="field1" ng-model="green.low"/></td>
    <td><input type="number" id="field2" ng-model="green.high"/></td></tr>
</table>

JS

我以这种方式检查验证：

function verifyForm(form, scope) {
    if (form.$error.required) {
        scope.addAlert("danger", "[![base.error.msg.required_fields]]");
        return false;
    }
    if (!form.$valid) {
        scope.addAlert("danger", "[![base.error.msg.invalid_form]]");
        return false;
    }
    return true;
};

因此，当点击提交按钮时，我只需要这样做：

if (!verifyForm($scope.formName, $scope))
        return;

如何添加这些自定义验证规则？或者，如果我必须自己在javascript中编写它们，我怎么能＆＃34;无效＆＃34;某些元素？

Answer 1

for field2有效使用：

<input type="number" max={{field1}}>

for field3：

<input type="number" ng-required="field2>0">

Answer 2

我认为对这类问题采用正确的Angular方法是创建执行custom validation的指令。

它不是很直观，你可能不得不花几分钟时间学习基本的想法，但是当它有效时，它实际上是Angular的强大力量之一。 / p>

这里有一个验证器，用于“大于其他输入”的验证器。可能看起来像：

angular.module('myApp', []).directive('gtOther', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {

        ctrl.$validators.gtOther = function(modelValue, viewValue) { 
            var other = scope.$eval(attrs['gtOther']);
            var thisValue = parseInt(viewValue);
            return thisValue > other;                        
        };
    }
  };
});

这里是working plunkr

angularJs - 表单的自定义验证规则

2 个答案: