31

我有一个自定义验证指令，在更改一个字段时会正确调用该指令。但是，该字段是否有效还取决于另一个字段的值。如果这很重要，则第二个字段是一个选择列表。

我想知道是否有某种方法可以在更改第二个表单时手动触发验证。也许通过使用ng-change事件。处理这样的事情的正确方法是什么？

这是我的指令：

angular.module('myApp', []).
    directive('validage', function () {
        return {
            require: 'ngModel',
            link: function (scope, elem, attr, ngModel) {

                function validate(value) {
                    var valid = true;
                    if ((GetDateDifference(new Date(value), new Date()) < 16 || GetDateDifference(new Date(value), new Date()) > 129)
                    && scope.dep.DependantType == "Spouse") {
                        valid = false;
                    }
                    ngModel.$setValidity('validage', valid);
                    return value;
                }

                //For DOM -> model validation
                ngModel.$parsers.unshift(function (value) {
                    var valid = true;
                    if ((GetDateDifference(new Date(value), new Date()) < 16 || GetDateDifference(new Date(value), new Date()) > 129)
                    && scope.dep.DependantType == "Spouse") {
                        valid = false;
                    }
                    ngModel.$setValidity('validage', valid);
                    return value;
                });

                //For model -> DOM validation
                ngModel.$formatters.unshift(function (value) {
                    var valid = true;
                    if ((GetDateDifference(new Date(value), new Date()) < 16 || GetDateDifference(new Date(value), new Date()) > 129)
                    && scope.dep.DependantType == "Spouse") {
                        valid = false;
                    }
                    ngModel.$setValidity('validage', valid);
                    return value;
                });
            }
        };
    });

如果您是 AngularJS 的新手，我绝对推荐阅读以下 2 篇文章：第 1部分和第 2 部分。它们是 AngularJS 表单的概述。

4

5 回答 5

50

经过大量搜索后，我发现我们只需调用$validate()所需的字段即可触发验证。
因此，例如，如果您的表单名为my_form（即在标记中表单标签具有name="my_form"属性）并且您要验证的字段名称是日期（在标记中输入字段具有name="date"属性），那么正如您所建议的那样可以使用第二个字段的ng-change事件并在调用ng-change 函数时调用。$scope.my_form.date.$validate();

于 2015-01-03T20:55:49.617 回答
3

我遇到了类似的问题：两个表单字段“interval”（用于 $scope.monitor.interval）和“timeout”（用于 $scope.monitor.timeout），条件是超时不得超过间隔的一半。

首先，我添加了一个自定义验证器来检查这种情况。现在我还需要在间隔更改时触发超时验证器。我通过观察模型的 monitor.interval 属性实现了这一点：

function EditMonitorCtrl($scope, $log, dialog, monitor) {
    $scope.monitor = monitor;

    ...

    // trigger validation of timeout field when interval changes
    $scope.$watch("monitor.interval", function() {
        if ($scope.editMonitorDlg.timeout.$viewValue) {          
            $scope.editMonitorDlg.timeout.$setViewValue($scope.editMonitorDlg.timeout.$viewValue);
        }
    });
}

如果没有“如果”，则在对话框初始化期间超时值被删除。

于 2013-07-20T16:23:31.743 回答
1

我无法ng-blur="myForm.myField.$validate()"在 AngularJS 1.5 中工作，可能是因为模型为myField空。

然而，ng-blur="myForm.myField.$setTouched()"确实奏效了。

于 2017-06-06T14:32:28.157 回答
0

我最终将指令添加到第二个字段，然后更改指令以将错误消息添加到有错误的字段。可能有更好的方法，但这就是我最终要做的。

于 2013-06-18T18:08:38.180 回答
0

只需在第一个字段更改时重置第二个字段，将触发对第二个字段的验证。

第一个字段更改事件的示例。

const parentControls:any = control.parent.controls;

if(parentControls.secondField.value !==''){
   parentControls.secondField.setValue(parentControls.secondField.value);
}
于 2020-11-04T23:53:37.803 回答