Question

我有一个自定义验证指令，当一个字段被更改时，该指令被正确调用。但是，此字段是否有效也基于另一个字段的值。如果这是重要的，则该第二个字段是选择列表。

我想知道是否有某些方法可以在第二个表单更改时手动触发验证。也许通过使用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的新手，我肯定会推荐阅读这两篇文章：part 1＆amp; part 2。它们是AngularJS表格的概述。

Answer 1

经过大量搜索后，我发现只需在所需字段上调用$validate()即可触发验证。
例如，如果您的表单名为 my_form （即在标记中，表单标记具有name="my_form"属性），并且您要验证的字段的名称是 date （在标记中输入字段具有name="date"属性），然后根据您的建议，您可以使用第二个字段的ng-change事件并调用{{1}每当调用ng-change函数时。

Answer 2

我遇到了类似的问题：两个表单字段＆＃34; interval＆＃34; （对于$ scope.monitor.interval）和＆＃34;超时＆＃34; （对于$ 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);
        }
    });
}

没有＆＃34;如果＆＃34;在初始化对话期间删除了超时值。

Answer 3

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

Answer 4

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

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

Answer 5

只需更改第一字段即可重置第二字段，将触发第二字段的验证。

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

const parentControls:any = control.parent.controls;

if(parentControls.secondField.value !==''){
   parentControls.secondField.setValue(parentControls.secondField.value);
}

当另一个字段发生变化时触发字段的验证

5 个答案: