2017-02-20 20 views
0

Я сделал валидатор даты. Он проверяет существующие даты. Мне нужно несколько валидаторов дат с другими ограничениями, например: макс. Валидатор дат, который не позволит пользователю ввести дату в будущем или валидатор дат, который принимает только прошедшие даты. Это мой текущий валидатор.resuable валидатор для нескольких случаев

export function dateValidator(group) { 

    const {day, month, year} = group.value; 
    const fullDate = `${day}/${month}/${year}`; 
    const dobPattern = /^(\d{1,2})[-\/](\d{1,2})[-\/](\d{4})$/; 
    const isStringValid = dobPattern.test(fullDate); 

    let isValid = false; 

    if (isStringValid) { 
    const intDay = Number(day); 
    const intMonth = Number(month); 
    const intYear = Number(year); 
    const jsMonth = intMonth - 1; 
    const date = new Date(intYear, jsMonth, intDay); 
    isValid = (date.getFullYear() === intYear && date.getMonth() === jsMonth && date.getDate() === intDay ; 
    } 

    return isValid ? null : { invalid: 'Invalid date' }; 
}; 

Как я могу ограничить пользователя от ввода будущих дат. Я использовал этот код с помощью следующей строки:

isValid = (date.getFullYear() === intYear && date.getMonth() === jsMonth && date.getDate() === intDay ; 

Но мне интересно, если есть более простой способ без необходимости копировать и мимо этого кода снова и снова, чтобы сделать небольшие ограничения на него.

ответ

1

Ваша dateValidator() функция должна быть функция завод (т.е. функция, которая возвращает функцию) вместо того, чтобы функция, которая возвращает ошибку непосредственно:

export function dateValidator(maxDate: string): ValidatorFn { 
    // Return a validator function. 
    return (group: FormGroup): {[key: string]: any} => { 
    // Re-use your existing validation code here and return the error if any. 
    // Optionally, use the `maxDate` param to customize the validation: 
    // entered dates should not go beyond `maxDate`. 
    }; 
} 

Как вы можете видеть, вы можете настроить функцию валидатора путем передачи параметров на фабрику функций. В моем примере я использовал параметр maxDate, чтобы указать самую далекую дату во времени, которую должен разрешить валидатор.

В вашей модели модели используйте этот валидатор, позвонив на завод с соответствующим значением, например. :

this.myForm = fb.group({ 
    'date': ['', [Validators.required(), dateValidator('02/20/2017')]] 
}); 

Вы можете увидеть еще один пример функции завода для валидатора в документ: https://angular.io/docs/ts/latest/cookbook/form-validation.html#custom-validation

+0

Означает ли это, что я должен скопировать и вставить код для нескольких валидаторов? Я новичок в этом. – Mai

+0

Нет. Если вы правильно упорядочите свой код, не требуется копирование/вставка. Просто создайте фабрику ONE 'dateValidator', как я объяснил, со всеми параметрами, необходимыми для настройки того, как это работает (например,' maxDate' в моем примере). Затем используйте этот один валидатор во всех полях, где это необходимо, вам, вероятно, придется передавать разные параметры каждый раз, когда вы используете валидатор. – AngularChef