Question

我有两个日期输入来跟踪旅行的开始和结束。我想编写一个自定义验证器，以确保结束日期在开始日期的X天内。

我已经编写了一个验证器来检查未来的日期，但我不知道是否可以创建一个依赖于另一个字段的验证器？根据我的理解ngModel让我可以访问当前的模型变量，但有没有办法访问其他变量？

<input type="date" future-date name="startDate" ng-model="startDate" required /> 
<div ng-messages="form.startDate.$error">
    <p ng-message="required">Please select a start date</p> 
    <p ng-message="futureDate">Must be in future</p> 
</div>

<input type="date" future-date name="endDate" ng-model="endDate" required /> 
<div ng-messages="form.endDate.$error">
    <p ng-message="required">Please select a start date</p> 
    <p ng-message="futureDate">Must be in future</p> 
</div>

和指令：

(function(){
    'use strict';

    angular
        .module('app')
        .directive('futureDate', autocomplete);

    function autocomplete() {
        return {
            restrict: 'A',
            require : 'ngModel',
            link: function(scope, element, attrs, ngModel) {    
                var validator = function(date) {
                    if(!date || date.length === 0) return;
                    var valid = (new Date() > now);
                    ngModel.$setValidity('futureDate', valid);
                    return date;
                };
                ngModel.$parsers.push(validator);
            }   
        };
    }
})();

Answer 1

注意：您的输入具有相同的名称......不太好。您不需要其他ng模型，因为您可以访问数据，而不是查看控件：

<input type="date" future-date name="startDate" ng-model="startDate" required /> 
<input type="date" future-date name="endDate" ng-model="endDate" later-than="startDate" required />

检查结束日期是否晚于开始的指令，您可以将其更改为X天。：

(function(){
    'use strict';

    angular
        .module('app')
        .directive('laterThan', laterThan);

    function laterThan($parse) {
        return {
            restrict: 'A',
            require : 'ngModel',
            link: function(scope, element, attrs, ngModel) {    
                var validator = function(date) {
                    var laterThan = $parse(attrs.laterThan)(scope);
                    if(!date || !laterThan) return;
                    var valid = (date > laterThan);
                    ngModel.$setValidity('laterThan', valid);
                    return date;
                };
                ngModel.$parsers.push(validator);
            }   
        };
    }
})();

http://plnkr.co/edit/uZNJZBVefVpbMoaPLUSP?p=preview

为表单输入创建依赖的自定义验证器？

1 个答案: