Показать сообщение об ошибке после отправки формы

Question

На Angular 8 Реактивной форме у меня есть следующее:

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <input id="name" type="text" formControlName="name">
  <span class="error" *ngIf="form.get('name').invalid && (form.get('name').dirty || form.get('name').touched)">
    Name error
  </span>
  <button type="submit" [disabled]="submitting">Send</button>
</form>

И onSubmit:

onSubmit() {

  this.submitting = true;

  if (this.form.valid) {
    // Submit form
  }

  this.submitting = false;

}

Я пытаюсь настроить форму следующим образом:

1. Сообщения об ошибках не видны при загрузке страницы;

2. Сообщение об ошибке для поля показывает, если пользователь вводит в поле что-то недопустимое;

3. Сообщение об ошибке показывает, отправлена ​​ли форма и есть ли ошибка в этом поле.

   Я хотел бы, чтобы форма была отправлена, даже если она недействительна.

У меня проблема:

When the form is submitted, without touching the Name field, the error does not show after submission.

Answer 1

Option1:

Вы можете добавить переменную isSubmitted bool, чтобы указать, была ли нажата кнопка отправки пользователем, и установить для нее значение true в onSubmit():

* 1006. *

и установите ngIf на это:

<span *ngIf="(form.get('name').invalid && form.get('name').touched) || 
             (form.get('name').untouched && isSubmitted)">
    Not Valid
</span> 

1. Сообщения об ошибках не видны при загрузке страницы;

Первый линия form.get('name').invalid && form.get('name').touched ответственная.

Сообщение об ошибке для поля показывает, если пользователь вводит в поле что-то недопустимое;

Angular framework делает это по умолчанию.

Сообщение об ошибке показывает, отправлена ​​ли форма и есть ли ошибка в этом поле.

Вторая строка form.get('name').untouched && isSubmitted

Option2

Как и в этой замечательной статье , при отправке вы можете перебрать все контроллеры и установить их как затронутые с помощью:

Object.keys(this.form.controls).forEach(field => {
    const control = this.form.get(field);
    control.markAsTouched({ onlySelf: true });
});

Таким образом, вы можете оставить разметку немного чище:

<span *ngIf="form.get('name').invalid && form.get('name').touched">
    Not Valid
</span>