javascript - 仅在表单提交后显示错误消息

Question

我正在创建带有验证的 Angular 6 表单。我只想在提交表单后显示错误消息。重要的事实是消息在输入过程中不应该改变。因此，例如，当用户没有在输入中键入任何内容然后提交表单时，应该显示所需的消息。之后，当用户键入内容时，消息应该始终可见，直到按下下一个提交按钮。此外，当满足先前的规则时，错误消息不应更改为其他消息。老实说，我不知道是否可以使用响应式(Reactive)表单。

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);
  }
}

演示: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 一起使用，请参阅 the answer to Q in stackoverflow