Angular Reactive form提交两次，提交成功后显示invalid错误信息

Question

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

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

我有 #1 使用自定义 ErrorStateMatcher。成功提交后，我在 FormGroupDirective 上调用 resetForm 函数，它将提交状态重置为 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 异步调用提交，您将在可观察和承诺响应中的 200 响应中重置表单。

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

Angular Reactive form提交两次，提交成功后显示invalid错误信息

Angular Reactive form submits twice and shows invalid error message after successful submission

angular

angular-reactive-forms