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

Question

有没有一种方法可以将响应式表单组重置为其初始值，而不是使用.reset()方法使其为空？

我有以下stackblitz，默认选择的值是Parent，如果用户将其更改为，并希望获取表格的初始值，则单击重置按钮即可。

目前，我尝试了：

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

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

P.S. 有些人可能会说用户可以重新选择默认值而不是点击重置按钮。但在我的情况下，我有一个庞大的用户表单，他需要更新自己的信息，如果他在某些值上出错，他可能需要重置为初始值。

- alim1990

---

为什么不在 reset() 方法的末尾添加 this.formGroup.get('family_relation').setValue(1)？ - Maihan Nijat

这是一个包含多行和多个表单控件的表单控件数组。我认为手动设置每个控件的值不是一个好主意。 - alim1990

从Angular 13开始，您可以这样做：https://dev59.com/RFgR5IYBdhLWcg3wRbs2#70461013 - Pizzicato

Answer 1

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

this.initialValues = this.formGroup.value;

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

this.formGroup.reset(this.initialValues);

- Ferares

Answer 2

您应该将控件设置为非空

// 如果设置了此标志，控件将重置为初始值。

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

cat.value 的值是 "tabby"

- Міша Шмигельський

---

这是正确的答案。只将其设置为“非空”将使其重置为创建表单时设置的初始值。 - Ahmad Alfy

@AhmadAlfy 这是一个使用严格类型表单实现的示例，该功能从Angular 14开始提供，而不是像问题所问的Angular 7。 - BrunoElo

Answer 3

请在此找到 Stackbliz 示例:

请在此找到 Stackbliz 示例:

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

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

更多信息请参见 https://angular.io/api/forms/FormControl#reset

- hezaltin

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();

  }

- Ric

---

最好在 ngOnInit 中使用吗？ - alim1990

当然可以！那么请将 this.setForm() 从构造函数中移至 ngOnInit() 中，完成！ - Ric

这是一个包含多行和多个表单控件的表单控件数组。我认为手动设置每个控件的值不是一个好主意。 - alim1990

如果你想使用“initial”默认值，那么你必须这样做。 - Ric

Answer 5

每个FormControl都有一个只读属性defaultValue，当控件在没有显式值的情况下被重置时，将使用该属性来重置值。

通常创建新的FormControl时，defaultValue将设置为null，但是当将{ nonNullable: true }作为选项参数传递时，defaultValue将设置为您传递给控件的初始值。 现在调用reset而不带参数将将控件重置为初始值。

const value = 'my initial value';
const formControl = new FormControl(value, { nonNullable: true });

formControl.reset(); // Resetting to initial value.

---

注意：

还请参阅 FormControl 类中的 defaultValue 注释：

/**
 * The default value of this FormControl, used whenever the control is reset without an explicit
 * value. See {@link FormControlOptions#nonNullable} for more information on configuring
 * a default value.
 */
readonly defaultValue: TValue;

从FormControlOptions的nonNullable属性获取更多信息：

/**
 * @description
 * Whether to use the initial value used to construct the `FormControl` as its default value
 * as well. If this option is false or not provided, the default value of a FormControl is `null`.
 * When a FormControl is reset without an explicit value, its value reverts to
 * its default value.
 */
nonNullable?: boolean;

- Wilt

Answer 6

可能有其他的方法来实现它，但我会使用以下其中一种方法：

方法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)
}

- Maihan Nijat