Angular7表单重置/取消时无法清除错误提示及边框的问题

我帮你分析下这个问题，核心原因是你控制错误显示的submitted变量在重置表单时没有被重置，加上clearFields方法里重复初始化表单的操作完全没必要，咱们一步步来改：

问题根源 #

你的错误提示和输入框错误边框是通过submitted && f.userName.errors这个条件控制显示的。点击登录按钮时submitted会被设为true，但this.loginForm.reset()只会清空字段值，并不会把submitted变回false，所以错误状态会一直保留。另外，每次点击取消都重新创建表单实例，反而会导致表单状态混乱。

解决方案 #

1. 修正组件逻辑，重置提交状态 #

首先确保组件里有submitted变量（你应该在onSubmit里已经用到它了），然后修改clearFields方法，去掉多余的表单初始化，同时重置submitted状态：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  // 组件元数据
})
export class LoginComponent implements OnInit {
  loginForm: FormGroup;
  submitted = false; // 控制提交状态的变量

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    // 表单初始化只在组件加载时执行一次
    this.validation();
  }

  validation() { 
    this.loginForm = this.formBuilder.group({ 
      userName: ['', Validators.required], 
      password: ['', Validators.required] 
    }); 
  }

  // 快捷获取表单控件的方法（你应该已经定义了）
  get f() { return this.loginForm.controls; }

  onSubmit() {
    this.submitted = true;
    // 表单无效则终止提交
    if (this.loginForm.invalid) {
      return;
    }
    // 这里写你的登录提交逻辑
  }

  clearFields() { 
    // 重置表单字段值和控件状态
    this.loginForm.reset();
    // 重置提交状态，让错误提示和边框消失
    this.submitted = false;

    // 可选：如果需要确保控件完全回到初始未触碰状态，可添加以下两行（reset()已处理大部分状态）
    // this.loginForm.markAsPristine();
    // this.loginForm.markAsUntouched();
  }
}

2. 确认HTML中的错误判断逻辑 #

你的HTML代码里的条件是正确的，只要submitted变回false，submitted && f.userName.errors就会不成立，错误边框和提示自然会隐藏：

<form #formDirective="ngForm" [formGroup]="loginForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label for="username">Username</label>
    <input type="text" formControlName="userName" class="form-control" placeholder="User name" [ngClass]="{ 'is-invalid': submitted && f.userName.errors }" />
    <div *ngIf="submitted && f.userName.errors" class="invalid-feedback">
      <div *ngIf="f.userName.errors.required">Username is required</div>
    </div>
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" placeholder="Password" />
    <div *ngIf="submitted && f.password.errors" class="invalid-feedback">
      <div *ngIf="f.password.errors.required">Password is required</div>
    </div>
  </div>
  <div class="form-group text-center">
    <button class="btn btn-primary" (click)="onSubmit();">Login</button> &nbsp;
    <button type="button" class="btn btn-light" (click)="clearFields();">cancel</button>
  </div>
</form>

额外提示 #

• 不要重复调用validation()来重置表单，这会创建新的FormGroup实例，可能导致视图与控制器的绑定异常，reset()方法已经足够重置表单的值和状态。
• 如果你用的是模板驱动表单，可以尝试formDirective.resetForm()，但对于响应式表单，控制submitted变量是更直接的解决方式。

内容的提问来源于stack exchange，提问作者Madhavi