尽管在 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) 项目也有同样的问题。问题是即使表单被重置，错误状态也没有设置回空。

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

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

但需要注意的是，我使用的是 Reactive Forms 并使用 Formbuilder 将表单创建为 Formgroup。如果像您一样简单地使用表单模板，结果是否相同，我并不乐观。

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

组件.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>

工作堆栈闪电战