Проверка триггера компонента ошибки угловой формы при отправке формы

Question

Я использую Angular 8.

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

this.form = this.fb.group({
  query: ['', [
    Validators.required
  ]]
});

И в HTML

<form [formGroup]="form" (submit)="onSubmit">
    <textarea formControlName="query" placeholder="SELECT ..."></textarea>
    <form-errors [control]="f.query"></form-errors>

    <button type="submit">Submit</button>
</form>

form-errors - это пользовательский шаблон, который отображает сообщение об ошибке, которое имеет следующий метод для запуска проверки проверки на элементе управления.

shouldShowErrors(): boolean {
    return this.control && 
           this.control.errors && 
           (this.control.dirty || this.control.touched);
}

Таким образом, проверка запускается при касании или изменении элемента управления.

Как я могу активировать проверку достоверности при отправке формы? Как получить доступ к form внутри компонента form-errors с помощью переданного элемента управления?

Answer 1

Вы можете пометить все элементы управления как затронутые при нажатии кнопки отправки, как создать метод для этого и вызвать его

 public markFormGroupTouched(formGroup: FormGroup) {
    Object.values(formGroup.controls).forEach(control => {
      control.markAsTouched();

      if (control.controls) {
          control.controls.forEach(c => this.markFormGroupTouched(c));
      }
    });
  }
  this.markFormGroupTouched(this.form);

demo