如何在Angular 5中使用Material表单字段重置响应式表单至原始状态

嗨，我明白你遇到的困扰了——调用FormGroup.reset()后不仅没回到初始状态，反而触发了所有验证规则，字段直接变成无效状态，确实挺闹心的。这主要是默认的reset()行为和你预期的不一样，咱们一步步来解决：

核心原因 #

默认的reset()方法如果不传参数，会把所有控件的值设为null（或空字符串），同时将表单状态标记为pristine和untouched。但如果你的表单控件带有Validators.required这类验证器，空值会直接触发验证失败，导致字段显示无效状态。而你想要的是回到表单初始化时的原始值和状态，所以得换个方式调用reset。

具体解决方案 #

1. 先保存表单的初始值 #

在组件初始化时，把FormGroup的初始值深拷贝保存下来，避免后续表单值变化影响初始值：

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

@Component({
  // 组件元数据
})
export class YourComponent implements OnInit {
  myForm: FormGroup;
  private initialFormValue: any; // 保存初始值

  ngOnInit() {
    // 初始化表单
    this.myForm = new FormGroup({
      username: new FormControl('默认用户名', Validators.required),
      email: new FormControl('default@example.com', [Validators.required, Validators.email])
    });

    // 深拷贝初始值（用JSON方法适合简单对象，复杂对象可以用lodash.cloneDeep）
    this.initialFormValue = JSON.parse(JSON.stringify(this.myForm.value));
  }
}

2. 重置时传入初始值 #

在提交函数里，调用reset()时把保存的初始值传进去，这样表单值会回到初始状态，验证器也会基于初始值重新校验（自然就通过了）：

onSubmit() {
  // 处理你的提交逻辑（比如发送请求）
  // ...

  // 重置表单到原始状态
  this.myForm.reset(this.initialFormValue);
}

3. 手动重置表单状态（可选） #

如果某些情况下，表单状态没有自动回到pristine和untouched（比如Material组件的视觉状态没更新），可以手动补充状态重置：

this.myForm.reset(this.initialFormValue);

// 标记整个表单为未修改、未触碰
this.myForm.markAsPristine();
this.myForm.markAsUntouched();

// 或者遍历每个控件单独重置（如果需要更精细的控制）
Object.values(this.myForm.controls).forEach(control => {
  control.markAsPristine();
  control.markAsUntouched();
});

4. 极端方案：重新初始化表单（不推荐） #

如果上面的方法都不生效，极端情况下可以直接重新创建FormGroup，完全回到初始状态。不过这种方式性能不如前几种，只作为备选：

onSubmit() {
  // 处理提交逻辑
  // ...

  // 重新初始化表单
  this.initForm();
}

private initForm() {
  this.myForm = new FormGroup({
    username: new FormControl('默认用户名', Validators.required),
    email: new FormControl('default@example.com', [Validators.required, Validators.email])
  });
}

这样操作后，你的表单就能完美回到提交前的原始状态，不会再触发不必要的验证错误啦！

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