Question

是否有一种方法可以将反应形式组重置为其初始值，而不是使用.reset()方法将其清空？

我有以下stackblitz，其中默认选择的值为Parent，如果用户将其更改为姐姐，并且希望将表格恢复为初始值，请单击“重置”按钮这样。

目前，我尝试过：

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

.reset()完全重置了表单。

P.S。有人可能说用户可以重新选择默认值，而不用单击“重置”按钮。但就我而言，我有一个庞大的用户表单，他需要更新他的信息，如果他在某些值中被误认为他可能需要重置为初始值。

Answer 1

请在此处找到stackbliz

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

Angular提供reset（formState：any = null），您可以将初始formState / object作为第一个参数传递

有关更多信息，https://angular.io/api/forms/FormControl#reset

Answer 2

创建方法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();

  }

Answer 3

可能还有其他方法可以使用，但是我可以使用以下方法之一来完成它：

方法1：：将值传递给重置方法。

reset() {
  this.formGroup.reset({family_relation: 1});
  //Or
  this.formGroup.markAsPristine;
  //Or
  this.formGroup.markAsTouched;
}

方法2：设置值

reset() {
  this.formGroup.reset();
  //Or
  this.formGroup.markAsPristine;
  //Or
  this.formGroup.markAsTouched;
  // this.formGroup.get('family_relation').setValue(1)
}

Answer 4

您可以保存表单的初始值：

this.initialValues = this.formGroup.value;

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

this.formGroup.reset(this.initialValues);

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

4 个答案: