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

Question

Я создаю Angular 6 Form с проверкой.Я хочу показывать сообщения об ошибках только после отправки формы.Важным фактом является то, что сообщения НЕ ДОЛЖНЫ изменяться во время набора текста.Так, например, когда пользователь ничего не набрал на входе и затем отправил форму, должны появиться необходимые сообщения.После этого, когда пользователь что-то набирает, сообщения должны быть видны все время до следующего нажатия кнопки подтверждения.Также сообщения об ошибках не должны меняться на другое, когда было выполнено предыдущее правило.Если честно, я не знаю, возможно ли это с помощью Reactive Forms.

app.component.html

<form [formGroup]="form" novalidate (ngSubmit)="submit()" #myform="ngForm">
    <input class="input" type="text" formControlName="firstName" />   
    <p *ngIf="form.get('firstName').hasError('required') && myform.submitted">
      Name is required
    </p>
    <p *ngIf="form.get('firstName').hasError('minlength') && myform.submitted">
      Min length of string is {{form.controls.firstName.errors.minlength.requiredLength}}    
    </p>
    <button type="submit">Submit</button>
</form> 

app.component.ts

export class AppComponent  {
  form: FormGroup
  constructor(private fb: FormBuilder,) {
      this.form = this.fb.group({
          firstName: ['', [Validators.required, Validators.minLength(5)]]
      });
  }

  submit() {
    console.log(this.form);
  }
}

DEMO: stackblitz

Спасибоза любую помощь!

Answer 1

В Angular 7 вы можете использовать: {updateOn: 'submit'} или {updateOn: 'blur'}

* Обновление с использованием новой FormGroup и нового FormControl (использование formBuilder не работает)

Используйте {updateOn: 'blur'}, когда вы хотите исправить ошибку, потерянную, фокусируйте ввод, {updateOn: 'submit'}, если это только при отправке

this.form = new FormGroup({
        firstName:new FormControl('', 
          [Validators.required, Validators.minLength(5)])
      },{updateOn:'submit'});

* Обновите 2 , если вы хотите использовать с formBuilder, смотрите ответ на Q в stackoverflow

Answer 2

Вы можете проверить валидацию в функции отправки следующим образом:

<p *ngIf="requiredError">
  Name is required
</p>
<p *ngIf="invalid">
  Min length of string is {{form.controls.firstName.errors.minlength.requiredLength}}    
</p>

  invalid: boolean;
  requiredError: boolean;
  submit() {
    console.log(this.form);
    this.invalid = this.form.get('firstName').hasError('minlength');
    this.requiredError = this.form.get('firstName').hasError('required');
  }