При проверке формы дочернего компонента ошибки не появляются [Угловой материал]

Question

У меня есть форма с одним дочерним компонентом. Но при отправке формы я не вижу ошибок для дочернего компонента. Ошибки появляются только для ввода, встроенного непосредственно в форму

Вот пример https://stackblitz.com/edit/angular-nvcwnh, нажмите кнопку отправки, после чего вы увидите одну ошибку при первом вводе

[Угловой, Угловой материал]

Answer 1

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

validateAllFormFields(formGroup: FormGroup | FormArray): boolean {
  const keysArray = formGroup instanceof FormGroup ? Object.values(formGroup.controls) : formGroup.controls;
  keysArray.forEach(control => {
    if (control instanceof FormControl) {
      control.markAsTouched({ onlySelf: false });
      control.updateValueAndValidity();
    } else if (control instanceof FormGroup || control instanceof FormArray) {
      this.validateAllFormFields(control);
    }
  });
  return formGroup.invalid;
}

send() {
  const formIsValid = this.validateAllFormFields(this.testForm);
}

Это исправленная версия вашего кода (я только что добавил вышеуказанный код в app.component.ts) https://stackblitz.com/edit/angular-zbzubh

Answer 2

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