Angular Material调用form.reset()后必填字段控件显示红色问题

嘿，我碰到过一模一样的问题！这是因为调用form.reset()的时候，虽然清空了字段内容，但表单控件的验证状态（比如touched/dirty）没被重置，再加上必填字段因为变成空值触发了required验证规则，所以就出现红色错误提示了。给你几个实用的解决办法：

方法一：重置时传入初始表单值 #

组件初始化时先把表单的初始值存下来，reset的时候把这个值传进去，这样控件既能回到初始状态，也不会触发必填验证：

// 组件TS文件示例
import { FormGroup, FormControl, Validators } from '@angular/forms';

export class YourComponent {
  form: FormGroup;
  private initialFormValues: any; // 用来存储表单初始值

  constructor() {
    // 初始化表单，这里填你原本的初始值
    this.form = new FormGroup({
      title: new FormControl('你的初始标题内容', Validators.required)
    });
    // 保存初始值
    this.initialFormValues = this.form.value;
  }

  onSubmit() {
    // 这里写你的提交到服务器的逻辑...
    
    // 重置表单到组件初始化时的状态
    this.form.reset(this.initialFormValues);
  }
}

方法二：重置表单后清除验证状态 #

如果你只是想清空字段内容，不需要保留初始值，可以在reset后手动把表单标记为未触碰、未修改状态，这样就能去掉红色错误提示：

onSubmit() {
  // 提交逻辑...
  
  this.form.reset();
  // 重置控件的验证状态，清除错误提示
  this.form.markAsUntouched();
  this.form.markAsPristine();
  
  // 如果需要单独处理某个控件，也可以这样操作：
  // this.form.get('title')?.markAsUntouched();
  // this.form.get('title')?.markAsPristine();
}

方法三：结合初始值和状态重置（最彻底） #

把上面两种方法结合起来，既能让表单回到初始值，又能确保控件状态完全干净，和组件刚初始化时一模一样：

onSubmit() {
  // 提交逻辑...
  
  this.form.reset(this.initialFormValues);
  this.form.markAsUntouched();
  this.form.markAsPristine();
}

你的HTML代码不需要修改，保持原结构即可：

<mat-form-field> 
  <input matInput id="title" placeholder="Enter your title" formControlName="title"> 
</mat-form-field>

这样处理后，调用reset方法就能达到你想要的效果啦~

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