角度反应表提交两次，提交成功后显示无效错误消息 [英] Angular Reactive form submits twice and shows invalid error message after successful submission

问题描述

我有一个角度反应表单，带有一个自定义的ErrorStateValidation。所需的行为如下：

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

我让#1使用定制的ErrorStateMatcher。在成功提交之后，我将调用FormGroupDirective上的Reset Form函数，该函数会将提交状态重置为False。问题是，表单似乎提交了两次，因此提交状态自动恢复为True，并在成功提交后立即显示无效消息。

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

推荐答案

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

• 手动按按钮或onKeyUp按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

这篇关于角度反应表提交两次，提交成功后显示无效错误消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！