Angular 7 反应式表单如何重置表单并获取其初始值而不是将它们重置为空值

Question

有没有办法将反应式表单组重置为其初始值而不是使用.reset()方法将其清空？

我有以下stackblitz，其中默认选择的值为Parent，如果用户将其更改为姐妹，并希望将表单设置为初始值，请单击重置按钮来执行此操作。

目前，我尝试过：

this.formGroup.reset();
//Or
this.formGroup.markAsPristine;
//Or
this.formGroup.markAsTouched

在.reset()完全地重置表单。

PS 有些人可能会说用户可以重新选择默认值而不是点击重置按钮。但就我而言，我有一个巨大的用户表单，他需要在其中更新他的信息，如果他在某些值中弄错了，他可能需要重置为初始值。

Answer 1

您可以保存表单初始值：

this.initialValues = this.formGroup.value;

然后将这些值传递给 reset 函数：

this.formGroup.reset(this.initialValues);

Answer 2

Tou 应该使控件为非空 // 如果设置此标志，控件将重置为初始值。

const cat = new FormControl('tabby', {nonNullable: true});
cat.reset(); 

cat.value 是“虎斑猫”

Answer 3

请在这里找到 stackbliz

https://stackblitz.com/edit/angular-material-ciztu9

Angular 提供了reset(formState:any = null)，你可以将初始的formState/对象作为第一个参数传递

欲了解更多信息https://angular.io/api/forms/FormControl#reset

Answer 4

setForm()创建一个将在构造函数中调用的方法并reset()

setForm() {
  this.formGroup = this.fb.group({
    'family_relation': new FormControl(this.familyRelationArray[0]['family_relation_id'])
  });
}

（从构造函数中删除设置初始值的代码）

resetForm()现在看起来像：

reset() {
    this.formGroup.reset();
    //Or
    this.formGroup.markAsPristine;
    //Or
    this.formGroup.markAsTouched

    this.setForm();
  }

和构造函数：

constructor(private fb: FormBuilder) {

    this.familyRelationArray = [
      {
        family_relation_id: 1,
        family_relation_type: 'Parent'
      },
      {
        family_relation_id: 2,
        family_relation_type: 'Sister'
      }
    ];
    this.setForm();

  }