Question

我有这些自定义验证指令可以按预期工作。问题是我想在用于比较的其他输入发生变化时触发输入验证。这是否可以在监视块中解决？

让我说我有

<input afterOtherDate="dateB" ng-model="dateA" value="2014"/>

<input beforeOtherDate="dateA" ng-model="dateB" value="2013"/>

如果我然后将dateA设置为dateB之后，则dateA将变为无效，但dateB不会知道。相反，如果我有

<input afterOtherDate="dateB" ng-model="dateA" value="2013"/>

<input beforeOtherDate="dateA" ng-model="dateB" value="2014"/>

当另一个输入发生变化时，需要重新验证这两个输入。所以两者都有效。

validationHelpers.directive('afterOtherDate', function () {
return {
    restrict: 'A',
    require: 'ngModel',
    link: function (scope, elm, attrs, ctrl) {
        var doValidation = function () {
            ctrl.$parsers.unshift(function (viewValue) {
                if (viewValue <= compareTo) {
                    ctrl.$setValidity('afterOtherDate', false);
                    return viewValue;
                } else {
                    ctrl.$setValidity('afterOtherDate', true);
                    return viewValue;
                }
            });
        };

        var scopeHierarchy = attrs["afterOtherDate"].split('.');
        var compareTo = scope;
        for (var k = 0; k < scopeHierarchy.length; k++) {
            compareTo = compareTo[scopeHierarchy[k]];
        }

        scope.$watch(attrs["afterOtherDate"], function (val) {

        });

        doValidation();
    }
};
});

validationHelpers.directive('beforeOtherDate', function () {
return {
    restrict: 'A',
    require: 'ngModel',
    link: function (scope, elm, attrs, ctrl) {
        var doValidation = function () {
            ctrl.$parsers.unshift(function (viewValue) {
                if (viewValue <= compareTo) {
                    ctrl.$setValidity('beforeOtherDate', true);
                    return viewValue;
                } else {
                    ctrl.$setValidity('beforeOtherDate', false);
                    return viewValue;
                }
            });
        };

        var scopeHierarchy = attrs["beforeOtherDate"].split('.');
        var compareTo = scope;
        for (var k = 0; k < scopeHierarchy.length; k++) {
            compareTo = compareTo[scopeHierarchy[k]];
        }

        scope.$watch(attrs["beforeOtherDate"], function (val) {

        });

        doValidation();
    }
};
});

在自定义指令中解决它会很酷！

BR TWD

Answer 1

我在指令中做了什么，我得到了我想要比较的字段的ngModel的控制器：

var compareModel = scope.$eval([formCtrl.$name, attr.dateAfter].join("."));

我在属性中传递了模型名称。然后，您可以访问其解析器并推送一个方法来激活模型中的验证。

 compareModel.$parsers.push(function (value) {

我强制compareModel使用$setViewValue重新验证：

compareModel.$parsers.push(function (value) {
    checkBefore(value);
    model.$setViewValue(model.$viewValue);
    return value;
});

AngularJS自定义验证，日期在其他日期之前或之后

1 个答案: