响应式表单提交后显示错误消息答案

【问题标题】：Show error message after reactive form submission响应式表单提交后显示错误消息
【发布时间】：2020-07-27 18:49:19
【问题描述】：

在 Angular 8 Reactive 表单上，我有以下内容：

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

}

我正在尝试如下配置表单：

页面加载时错误消息不可见；
如果用户在该字段中输入了无效的内容，则会显示字段的错误消息；
如果表单已提交并且该字段有错误，则会显示错误消息。

即使表单无效，我也希望提交。

我遇到的问题是：

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

【问题讨论】：

标签： angular angular8 angular-reactive-forms

【解决方案1】：

选项1：

您可以添加一个isSubmitted bool 变量来指示用户是否按下了提交按钮，并在onSubmit() 中将其值设置为true：

onSubmit() {
    this.isSubmitted = true;

    //rest of you code
}

并将ngIf 设置为此：

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

页面加载时错误消息不可见；

第一行form.get('name').invalid && form.get('name').touched负责。

如果用户在领域；

Angular 框架默认执行此操作。

如果表单已提交并且该字段存在错误，则会显示错误消息。

第二行form.get('name').untouched && isSubmitted

选项2

就像在这个伟大的article 中一样，在提交时，您可以迭代所有控制器并将它们设置为触摸：

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>

【讨论】：