改变编程模型时AngularJS自定义的验证不点火自定义、模型、AngularJS

2023-09-13 02:54:42 作者:你曾在我心上

我创建了一个自定义验证的要求日期是在过去。验证似乎手动输入日期,到现场时,工作带来极大的。但是,如果我进入编程更改日期(直接改变模型,而不是打字领域),验证不火。

我相信我做的自定义验证指令指示的文件中。 这里是一个的jsfiddle 的说明问题。在小提琴,如果单击更改日期编程按钮,就可以看到没有得到显示的验证错误(但它如果您手动修改)。这里是指令code(也在小提琴):

  myApp.directive('pastDate',函数(){    返回{        限制:'A',        要求:'?ngModel',        链接:功能(范围,元素,ATTRS,CTRL){            Ctrl键。$ parsers.unshift(功能(viewValue){                VAR今天=新的Date();                今天=新的日期(today.getFullYear(),today.getMonth(),today.getDate());                如果(新的日期(viewValue)LT;今天){                    CTRL $ setValidity('pastDate',真)。                    返回viewValue;                }                CTRL $ setValidity('pastDate',虚假)。                返回不确定的;            });        }    };}); 

解决方案

有约束力的, $解析器模型的两种方式控制视图到模型管道方向和 $格式化控制模型到视图方向的管道。当您更新控制器的型号,改变穿过 $格式化管道

我已经更新了您的code至:这个,所以它处理两种方式。

  myApp.directive('pastDate',函数(){    返回{        限制:'A',        要求:'?ngModel',        链接:功能(范围,元素,ATTRS,CTRL){            功能验证(值){                VAR今天=新的Date();                今天=新的日期(today.getFullYear(),today.getMonth(),today.getDate());                如果(新的日期(值)<今天){                    CTRL $ setValidity('pastDate',真)。                    返回值;                }                CTRL $ setValidity('pastDate',虚假)。                返回值;            }            CTRL $ parsers.unshift(验证)。            Ctrl键。$ formatters.unshift(验证)        }    };}); 
混合式框架AngularJS

I have created a custom validator for requiring a date to be in the past. The validation seems to work great when entering the date manually into the field. However, if I enter change the date programatically (change the model directly as opposed to typing in the field), the validation does not fire.

I believe I am doing the custom validation directive as directed in the documentation. Here is a jsFiddle illustrating the problem. In the fiddle, if you click the "Change date programatically" button, you can see the validation error doesn't get displayed (but it does if you change it manually). Here is the directive code (also in the fiddle):

myApp.directive('pastDate', function() {
    return {
        restrict: 'A',
        require: '?ngModel',
        link: function (scope, element, attrs, ctrl) {
            ctrl.$parsers.unshift(function (viewValue) {
                var today = new Date();
                today = new Date(today.getFullYear(), today.getMonth(), today.getDate());

                if (new Date(viewValue) < today) {
                    ctrl.$setValidity('pastDate', true);
                    return viewValue;
                }
                ctrl.$setValidity('pastDate', false);
                return undefined;
            });
        }
    };
});

解决方案

There are two ways of the model binding, $parsers controls the pipeline of view-to-model direction, and $formatters controls the pipeline of the model-to-view direction. When you update the model in the controller, the change goes through the $formatters pipeline.

I have updated your code to: this, so it handles both ways.

myApp.directive('pastDate', function() {
    return {
        restrict: 'A',
        require: '?ngModel',
        link: function (scope, element, attrs, ctrl) {
            function validate (value) {
                var today = new Date();
                today = new Date(today.getFullYear(), today.getMonth(), today.getDate());

                if (new Date(value) < today) {
                    ctrl.$setValidity('pastDate', true);
                    return value;
                }
                ctrl.$setValidity('pastDate', false);
                return value;
            }
            ctrl.$parsers.unshift(validate);
            ctrl.$formatters.unshift(validate)
        }
    };
});