时间戳

首页 > 解决方案 > 尽管 Angular 中的表单已重置，但输入字段仍标记为红色

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

问题描述

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

提前致谢！

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>

标签： angularformsvalidationinputfrontend

解决方案

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

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

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

不过需要注意的是，我使用的是 Reactive Forms，并使用 Formbuilder 将表单创建为 Formgroup。如果只是使用像你这样的表单模板，我不肯定结果是否相同。

推荐阅读