代码之家 › 专栏 › 技术社区 › alim1990

角7反应式窗体如何重置窗体并获取其初始值,而不是将其重置为空值

angular7 angular-forms angular-reactive-forms angular

0

alim1990 · 技术社区 · 6 年前

是否有方法将一个反应式表单组重置为其初始值,而不是使用 .reset() 方法?

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

目前,我尝试:

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

这个 .reset() 完全重置窗体。

注意:有些人可能会说,用户可以重新选择默认值,而不是单击重置按钮。但在我的例子中,我有一个巨大的用户表单,他需要更新他的信息,如果在某些值中出错,他可能需要重置为初始值。

2 回复 | 直到 6 年前

1

2

hezaltin 6 年前

请在这里找到stackbliz

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

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

2

1

Ric 6 年前

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

  }

3

0

Maihan Nijat 6 年前

可能还有其他方法,但我会使用以下方法之一:

方法1: 将值传递给reset方法。

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

4

0

Ferares 5 年前

您可以保存表单初始值:

this.initialValues = this.formGroup.value;

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

this.formGroup.reset(this.initialValues);