如何使用FormGroup.reset()将Angular 2表单重置为预定义状态？

完全可以修改FormGroup的重置目标状态！你遇到的form.reset()清空字段的问题，是因为默认情况下reset()会把控件重置为空值或初始默认值（也就是创建FormControl时未指定的话就是null/空串）。要重置到从数据库加载的初始个人资料状态，只需要提前保存这份初始值，然后重置时传入即可。

具体步骤如下： #

1. 保存初始表单值
   当你从数据库加载完数据并初始化/更新完FormGroup之后，把当前的表单值做一个深拷贝存到组件变量里——这里一定要深拷贝，不然后续表单的修改会同步影响到保存的初始值（因为对象是引用类型）。

   示例代码：

   import { FormBuilder, FormGroup } from '@angular/forms';
   
   export class ProfileComponent {
     form: FormGroup;
     private originalProfile: any; // 用来存初始的个人资料值
   
     constructor(private fb: FormBuilder) {}
   
     ngOnInit() {
       // 模拟从数据库加载数据
       const loadedProfile = this.loadProfileFromDB();
   
       // 初始化表单
       this.form = this.fb.group({
         firstname: [loadedProfile.firstname],
         lastname: [loadedProfile.lastname],
         // 剩下16个控件按这个格式添加...
       });
   
       // 深拷贝保存初始值
       this.originalProfile = JSON.parse(JSON.stringify(this.form.value));
     }
   
     private loadProfileFromDB() {
       // 实际项目里这里是HTTP请求获取数据
       return {
         firstname: 'Jack',
         lastname: 'Doe',
         // 其他字段...
       };
     }
   }
   

2. 重置按钮绑定重置逻辑
   在重置按钮的点击事件里，把保存好的初始值传给form.reset()方法，这样表单就会回到加载时的状态，同时还会自动把表单标记为pristine（未修改）和untouched（未触碰）状态，完美符合需求。

   示例代码：

   onReset() {
     // 重置到数据库加载的初始状态
     this.form.reset(this.originalProfile);
   }
   

   对应的模板代码：

   <button type="button" (click)="onReset()">重置表单</button>
   

额外说明： #

• 如果你的表单里包含复杂对象或数组，JSON.parse(JSON.stringify())可能会有局限性（比如无法处理Date类型），这时候可以使用专门的深拷贝工具，比如Lodash的cloneDeep方法。
• 如果你是先创建空表单，再通过patchValue或setValue加载数据，那保存初始值的时机应该放在patchValue之后，确保存的是正确的加载后数据。

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