尽管 Angular 中的表单已重置，但输入字段仍标记为红色

Question

我遇到了这个问题，我有一个带有输入验证的表单，其中包含一个重置按钮，单击该按钮应重置表单，从而重置输入字段的状态以及提交的状态。输入字段被清除，但它们被标记为红色，因为一个验证标准是输入字段不得为空。有人可以解释为什么会发生这种情况或更好地解决它。

提前致谢！

import { Component, OnInit } from "@angular/core";
import { NgForm } from "@angular/forms";

@Component({
  selector: "app-contact",
  templateUrl: "./contact.component.html",
  styleUrls: ["./contact.component.css"],
})
export class ContactComponent implements OnInit {
  constructor() {}

  ngOnInit(): void {}

  sendMessage(form: NgForm): void {
    if (form.invalid) {
      return;
    }
    form.resetForm();
    form.reset();
  }

  clear(form: NgForm): void {
    form.resetForm();
  }
}

<mat-card>
  <form
    class="contactForm"
    (ngSubmit)="sendMessage(postForm)"
    #postForm="ngForm"
    [ngFormOptions]="{ updateOn: 'submit' }"
  >
    <mat-form-field class="nameField">
      <mat-label> Your Name </mat-label>
      <input
        matInput
        type="text"
        required
        name="inputName"
        ngModel
        #name="ngModel"
      />
      <mat-error *ngIf="true">
        Please enter a name
      </mat-error>
    </mat-form-field>

    <mat-form-field class="emailField">
      <mat-label> Your E-Mail </mat-label>
      <input
        matInput
        type="email"
        required
        name="inputEmail"
        ngModel
        email
        #email="ngModel"
      />
      <mat-error *ngIf="true">
        Please enter a valid email address
      </mat-error>
    </mat-form-field>

    <mat-form-field class="msgField">
      <mat-label> Your Message </mat-label>
      <textarea
        matInput
        type="text"
        required
        name="message"
        ngModel
        #message="ngModel"
      >
      </textarea>
      <mat-error *ngIf="true">
        Please enter a message
      </mat-error>
    </mat-form-field>

    <button mat-raised-button class="sendBtn" color="accent" type="submit">
      Send
    </button>
    <button
      mat-raised-button
      class="clearBtn"
      color="warn"
      (click)="clear(postForm)"
    >
      Clear
    </button>
  </form>
</mat-card>

Answer 1

我的 Angular (v8) 项目遇到了同样的问题。问题是即使表单被重置，错误状态也没有设置回 null。

对我有用的是手动重置每个表单控件的错误状态。这不是最漂亮的，但它确实有效。试试这样的：

clear(form: NgForm): void {
    form.resetForm();
    Object.keys(form.controls).forEach(key =>{
       form.controls[key].setErrors(null)
    });
  }

一个警告是，我使用的是响应式表单，并使用 Formbuilder 将表单创建为表单组。如果像你这样简单地使用表单模板，我不肯定结果是否相同。

Answer 2

将type="button" 属性添加到清除按钮。

当您将(ngSubmit)="sendMessage(postForm)" 添加到表单时，清除按钮被视为表单提交，因此函数sendMessage(postForm) 被调用，结果您收到验证消息..

作为注释，您也可以使用 type="reset" 之类的，

<button
  mat-raised-button
  class="clearBtn"
  color="warn"
  (click)="clear(postForm)"
  type="reset"
>
  Clear
</button>

这会将表单中的所有输入重置为其初始值。

参考：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/reset

component.html

<mat-card>
  <form
    class="contactForm"
    (ngSubmit)="sendMessage(postForm)"
    #postForm="ngForm"
    [ngFormOptions]="{ updateOn: 'submit' }"
  >
    <mat-form-field class="nameField">
      <mat-label> Your Name </mat-label>
      <input
        matInput
        type="text"
        required
        name="inputName"
        ngModel
        #name="ngModel"
      />
      <mat-error *ngIf="true">
        Please enter a name
      </mat-error>
    </mat-form-field>

    <mat-form-field class="emailField">
      <mat-label> Your E-Mail </mat-label>
      <input
        matInput
        type="email"
        required
        name="inputEmail"
        ngModel
        email
        #email="ngModel"
      />
      <mat-error *ngIf="true">
        Please enter a valid email address
      </mat-error>
    </mat-form-field>

    <mat-form-field class="msgField">
      <mat-label> Your Message </mat-label>
      <textarea
        matInput
        type="text"
        required
        name="message"
        ngModel
        #message="ngModel"
      >
      </textarea>
      <mat-error *ngIf="true">
        Please enter a message
      </mat-error>
    </mat-form-field>

    <button mat-raised-button class="sendBtn" color="accent" type="submit">
      Send
    </button>
    <button
      mat-raised-button
      class="clearBtn"
      color="warn"
      (click)="clear(postForm)"
      type="button"
    >
      Clear
    </button>
  </form>
</mat-card>

Working Stackblitz

Answer 3

为您的发送按钮设置了 type="submit" put type="reset"，但是您必须调用（单击）事件才能发送按钮添加用于提交表单的功能，这将很好用，试试吧！！