Angular Reactive 表单：如何在提交后重置表单状态并保留值

Question

以 Angular 反应形式。 成功提交后如何仅重置表单状态？

这是过程：

• 从服务结果创建表单和setValue
• 修改值并提交表单
• 如果表单正确提交到服务，则重置并保留值

如何保持修改后的值并将表单重置为其原始状态。

form.reset() 只是清空表单。 但是，如果我不调用它，则状态不会重置，例如我根据表单状态类（原始、脏、有效等）进行的验证仍然存在。

Answer 1

@smnbbrv 的解决方案效果很好。

您还可以向 reset() 方法提供您的实际表单值。

鉴于myReactiveForm是组件中的反应式表单。 成功提交表单后（例如通过调用服务），您可以执行以下操作：

this.myReactiveForm.reset(this.myReactiveForm.value);

它将重置表单并将“新”表单值设置为与表单相同的值。

这个方法可以在 Tour of Hero 示例中看到Angular.io 官方文档

Answer 2

这非常简单：

this.form.markAsPristine();
this.form.markAsUntouched();

这将重置表单元数据，表单再次保持原始状态

Answer 3

角度/材料用户注意事项2

如果您使用有角度的材质控件，则会增加复杂性，并使用mat-error来显示您的错误。 此类错误是根据ErrorStateMatcher的结果显示的（除了您可能已应用的任何*ngIf ）。

如果满足以下条件， 默认 ErrorStateMatcher会显示错误：

isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean 
{
   return !!(control && control.invalid && (control.touched || (form && form.submitted)));
}

所以这意味着如果表单曾经被提交并且控件变得无效（根据验证规则），那么将显示错误。 这通常不是您想要的（尤其是当您正在阅读这个问题时！）。

查看源代码 - 除非您在 ngForm 指令（不是 FormGroup 对象）上调用resetForm ，否则没有办法设置resetForm submitted = false 。 将状态设置为原始或未触及不会将提交重置为 false。

如果您使用mat-error您可能会发现为自定义逻辑创建自己的 ErrorStateMatcher（简单接口）会更容易，如果这是一个问题。

另请注意， ErrorStateMatcher 仅适用于角度材料 - 而不是标准角度形式的一部分。

Answer 4

04-06-2020： Ionic 5+ 和 Angular 9+

只是一行。 即this.form.reset();

重置 FormGroup，将所有后代标记为原始和未触及，并且所有后代的值都为 null。

 form: FormGroup;

 constructor(private formBuilder: FormBuilder, ) { }

  resetTheForm(): void {
    this.form.reset();
  }

Answer 5

对于使用 angular 7 时对我有用的反应式表单：是使用模板驱动的表单并像这样通过表单提交处理程序传递它

// component.html
 <form #f="ngForm" [formGroup]="form" (ngSubmit)="onSubmit(f)" novalidate>
 ....
</form>


// component.ts

onSubmit(form: NgForm) {

// reset form here
 form.form.markAsPristine();
 form.resetForm();
}

它会将表单和提交状态重置为默认值。

Answer 6

添加另一种答案，如果你的表单中有一个残疾的输入，使用getRawValue（）作为ngForm.resetForm的参数（）。 请参阅示例：

在 HTML 中：

<form
  (ngSubmit)="formSubmit(myForm)"
  #myForm="ngForm"
>
    ...
</form>

在.TS：

formSubmit(myForm: NgForm) {
   myForm.resetForm(myForm.form.getRawValue());
}

Answer 7

有一段时间this.myForm.reset(this.myForm.value); 可能不会重置为初始值所以最好创建一个单独的函数来初始化表单并在 ngOnInit() 中调用它，然后再调用this.myForm.reset(this.myForm.value);

ngOnInit(){
  myFormValues();
}

myFormValues() {
  this.myForm= this.fb.group({
      id: ['', Validators.required],
      name: ['', Validators.required],
    });
}

submitForm() {
  // save data
  myFormValues();
  this.myForm.reset(this.myForm.value)
}

Answer 8

我使用补丁值来清除反应式表单控件。 它对我有用。 请尝试以下代码。

onClear() {
   this.formGroup.patchValue({
     fieldName: ''
   });
}