2015-11-17 2 views
0

У меня есть два ввода даты для отслеживания начала и конца поездки. Я хочу написать специальный валидатор, чтобы убедиться, что дата окончания находится в течение 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); 
      } 
     }; 
    } 
})(); 

ответ

1

Примечание: ваши входы имеют такое же имя ... не хорошо. Вам не нужно еще нг-модель, так как вы можете получить доступ к данным, не рассматривает управление:

<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 /> 

директивы, чтобы проверить, что дата окончания позже, чем начало, вы можете изменить его на Е дни OFC .:

(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

+0

Спасибо. Имя входа было опечаткой. Это похоже на то, что мне нужно, но единственная проблема заключается в том, что он не будет revalidate при изменении 'startDate'. Могу ли я просто поставить '$ watch' в директиве, чтобы ждать изменений, а затем повторить проверку? –

Смежные вопросы