Подтвердить startDate endDate в Angular - PullRequest
Новая
       80

Подтвердить startDate endDate в Angular

0 голосов
/ 05 августа 2020

Я пытаюсь реализовать форму Angular 6 с startDate и endDate, используя PrimeNg Calendar (DatePicker), обе даты типа Date.

Как я могу проверить, что startDate <= endDate и endDate> = Дата начала. Это перекрестная проверка. Казалось бы, у Angular есть какой-нибудь инструмент для этого. Я видел несколько общих c Angular примеров, когда выполняется одна из этих проверок, но пока не видел обеих. Может быть, используя Pipe? Или любые инструменты PrimeNg c?

Посоветуйте, пожалуйста.

TIA, Олег.

Ответы [ 2 ]

0 голосов
/ 06 августа 2020

Вы можете создать собственный валидатор.

custom-validator.ts 

export function DateLessThanOrEqualsValidator(dateCompareControlName: string) {

    let thisDateControl: AbstractControl;
    let otherDateControl: AbstractControl;

    return function DateLessThanOrEqualsValidate(control: AbstractControl): ValidationErrors {
        if (!control.parent) {
            return null;
        }
        if (!thisDateControl) {
            thisDateControl = control;
            otherDateControl = control.parent.get(dateCompareControlName) as AbstractControl;
            if (!otherDateControl) {
                throw new Error('dateLessThanOrEqualsValidator(): other control is not found in parent group');
            }
            otherDateControl.valueChanges.subscribe(() => {
                thisDateControl.updateValueAndValidity();
            });
        }
        if (!otherDateControl || !otherDateControl.value) {
            return null;
        }
        const date1 = thisDateControl.value;
        const date2 = otherDateControl.value;
        if (date1 !== null && date2 !== null && date1 > date2) {
            return {
                'date_less_than_or_equal': true
            };
        }
        return null;
    };
}

И использовать его: 

    this.myForm = new FormGroup({
      'startDate': new FormControl('', [Validators.required, DateLessThanOrEqualsValidator('endDate')]), // must be same "endDate"
      'endDate': new FormControl('', [Validators.required]),
    });

Каждый раз startDate > endDate, myForm будет недействительным

Демо здесь

0 голосов
/ 05 августа 2020

Вы можете использовать функцию updateValueAndValidity, с помощью которой вы можете проверить элемент управления в любое время, в этом случае, когда значение startDate изменяется, или наоборот.

Функции проверки должны быть предварительно добавлены к каждому formControl.

Проверять дату начала при изменении даты окончания. 

this.formGroup.get('endDate').valueChanges.subscribe({
  next: (value) => {
    this.formGroup.get('startDate').updateValueAndValidity();
  }
});
...