При создании веб-приложений с помощью Angular одним из распространенных требований является проверка вводимых дат, гарантируя, что дата начала предшествует дате окончания. В этой статье мы рассмотрим различные методы достижения этой проверки с использованием как реактивных форм, так и форм, управляемых шаблонами, в Angular. Мы углубимся в примеры кода и предоставим пошаговые объяснения для каждого метода, что позволит вам освоить проверку дат в ваших проектах Angular.

Метод 1: реактивные формы с пользовательской функцией проверки
Реактивные формы предоставляют мощный способ проверки формы в Angular. Чтобы проверить даты начала и окончания, мы можем создать собственную функцию проверки. Вот пример:

import { FormGroup, ValidatorFn, AbstractControl } from '@angular/forms';
function dateRangeValidator(): ValidatorFn {
  return (formGroup: FormGroup) => {
    const startDate = formGroup.get('startDate')?.value;
    const endDate = formGroup.get('endDate')?.value;
    if (startDate && endDate && startDate > endDate) {
      return { dateRange: true };
    }

    return null;
  };
}
// Usage in the component
this.myForm = this.formBuilder.group({
  startDate: ['', Validators.required],
  endDate: ['', Validators.required]
}, { validator: dateRangeValidator() });

Метод 2: формы на основе шаблонов с помощью ngModel и ngModelGroup
Если вы предпочитаете формы на основе шаблонов, вы можете добиться проверки даты с помощью директив ngModel и ngModelGroup. Вот пример:

<form #myForm="ngForm">
  <div ngModelGroup="dateRange" #dateRange="ngModelGroup">
    <input name="startDate" [(ngModel)]="model.startDate" required>
    <input name="endDate" [(ngModel)]="model.endDate" required>
  </div>
  <div *ngIf="dateRange.invalid && (dateRange.dirty || dateRange.touched)">
    <div *ngIf="dateRange.errors?.dateRange">
      Start date must be before end date.
    </div>
  </div>
</form>

Метод 3: реактивные формы с межполевыми валидаторами
Другой подход к реактивным формам — использование межполевых валидаторов. Вот пример:

import { FormGroup, ValidatorFn, AbstractControl } from '@angular/forms';
function dateRangeValidator(): ValidatorFn {
  return (formGroup: FormGroup) => {
    const startDate = formGroup.get('startDate')?.value;
    const endDate = formGroup.get('endDate')?.value;
    return startDate && endDate && startDate > endDate
      ? { dateRange: true }
      : null;
  };
}
// Usage in the component
this.myForm = this.formBuilder.group({
  startDate: ['', Validators.required],
  endDate: ['', Validators.required]
});
this.myForm.setValidators(dateRangeValidator());

В этой статье мы рассмотрели несколько методов проверки дат начала и окончания в Angular. Независимо от того, предпочитаете ли вы реактивные формы или формы на основе шаблонов, теперь у вас есть инструменты для реализации проверки даты в ваших проектах Angular. Используя пользовательские функции проверки, валидаторы между полями и директивы, такие как ngModelGroup, вы можете гарантировать, что ваши пользователи предоставляют действительные диапазоны дат. Оставайтесь с нами, чтобы получать больше советов и рекомендаций по Angular!