Angular 响应式表单提交两次，提交成功后显示无效错误信息

Question

我有一个带有自定义 ErrorStateValidation 的 Angular 反应式表单。 期望的行为是这样的：

1. 仅当字段已提交且文本输入字段中未输入任何内容时才显示无效错误消息。
2. 如果表单已成功提交，请将验证和提交状态重置为 false，并且不显示无效错误消息。

我有 #1 使用自定义 ErrorStateMatcher。 成功提交后，我在 FormGroupDirective 上调用 resetForm function，它确实将提交状态重置为 FALSE。 问题是，表单似乎被提交了两次，因此提交状态自动返回 TRUE，并在成功提交后立即显示无效消息。

这个问题的工作示例可以在这里找到https://stackblitz.com/edit/add-angular-material-p9btep?devtoolsheight=33&file=src/app/app.component.ts

Answer 1

这是因为表单提交事件的冒泡。 您的表单被提交了两次：

• 手动通过按钮单击或使用输入键的onKeyUp
• 浏览器自动提交

我建议您使用 click/enter 删除手动提交，并将(ngSubmit)添加到您的表单中，并使用浏览器行为对您有利，如下所示：

<h1>Angular Forms Example</h1>

<form
  [formGroup]="empForm"
  #empFormDirective="ngForm"
  (ngSubmit)="onAddEmpTopic($event, empFormDirective)" <!-- add this -->
>
  <mat-form-field appearance="standard">
    <mat-label>Add a topic</mat-label>
    <input
      matInput
      [errorStateMatcher]="customErrorStateMatcher"
      placeholder="I wish to discuss..."
      formControlName="empTopic"
    />
    <mat-error *ngIf="empTopic.errors?.required"
      >Topic must not be empty.</mat-error
    >
  </mat-form-field>
  <button mat-button>
    <mat-icon>note_add</mat-icon>
  </button>
</form>

工作示例： https://stackblitz.com/edit/add-angular-material-j1wjno?devtoolsheight=33&file=src%2Fapp%2Fapp.component.html

Answer 2

需要延迟工作。

问题是提交事件与重置事件发生冲突，通常表单将通过 api 异步调用提交，您将在可观察和 promise 响应内的 200 响应上重置表单。

  console.log(' Call API to add a topic!');
// set timeout can represent subscription or promise response.
        setTimeout(() => {
          empFormDirective.resetForm(empFormDirective.value);
        });