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

Question

以 Angular 反应形式。提交成功后如何只重置表单的state？

流程如下：

• 创建表格并根据服务结果

  setValue

• 修改值并提交表单
• 如果表单正确提交给服务，则重置并保留值

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

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

Answer 1

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

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

鉴于

myReactiveForm

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

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

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

此方法可以在英雄之旅示例中看到官方Angular.io文档

Answer 2

这非常简单：

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

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

Answer 3

@Angular/Components（材质）用户注意事项

如果您使用角度材质控件，则会增加复杂性，并使用

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 对象）上调用

submitted = false

，否则无法设置

resetForm

。将状态设置为原始或未更改不会将提交重置为 false。

如果您使用

mat-error

，您可能会发现为自定义逻辑创建自己的 ErrorStateMatcher（简单界面）会更容易（如果这是一个问题）。

注意：ErrorStateMatcher 仅存在于角形材料中 - 而不是标准角形形式的一部分。

Answer 4

2020 年 4 月 6 日： 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

补丁值

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

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

Answer 7

getRawValue()

作为 ngForm.resetForm() 的参数。请参阅示例： 在 HTML 中：

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

在.TS中：

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

Answer 8

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 9