Проверьте несколько полей даты начала и даты с помощью Angular 7 или более поздней версии.

Question

У меня есть несколько полей ввода даты начала и окончания. Я не мог найти способ проверить их. Я пытался проверить их, но не смог получить соответствующий вывод.

Это URL-адрес stackblitz: https://stackblitz.com/edit/angular-yhbuqn-wpbwjw

У меня есть несколько целей:

1) Необходимо установить значение по умолчаниюдаты, которые я упомянул в файле TS. Есть закомментированный код, который я попытался установить значения по умолчанию.

2) Сообщение об ошибке не отображается, если дата окончания больше, чем дата начала. Вы можете видеть, что красная граница применяется, но сообщение не отображается.

3) Не удалось установить значения для второго набора полей ввода даты начала и окончания.

Answer 1

Для 1-й части, чтобы установить дату, попробуйте это:

  ngOnInit() {
    this.myForm = this.formBuilder.group({
      users: this.formBuilder.array([
        this.formBuilder.group(
          {
            startDate: [this.startDate],
            endDate: [this.endDate]
          },
          { validator: this.checkDates }
        )
      ])
    });
  }

Для 2-й части попробуйте следующее: Таким образом, вы должны вручную коснуться ввода, или вы можете попробовать с помощью this.myForm.markAllAsTouched();

<mat-error              *ngIf="myForm.controls['users'].controls[$index].controls['endDate'].touched && myForm.controls['users'].controls[$index].invalid">
                End date cannot be earlier than start date
</mat-error>

или

 <mat-error *ngIf="myForm.controls['users'].controls[$index].controls['endDate'].value != null && myForm.controls['users'].controls[$index].invalid ">
                End date cannot be earlier than start date
</mat-error>