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

Question

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

field 2 has to be larger than field 1

field 3 is required if field 2 is not negative

...

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 编写它们，我怎样才能使某些元素“无效”？

Answer 1

我认为解决此类问题的正确 Angular 方法是创建执行 custom validation 的指令.

它不是很直观，您可能需要花几分钟来学习基本概念，但当它起作用时，它实际上是 Angular 的强大功能之一。

“大于其他输入”的验证器可能如下所示:

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