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

Question

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

这是过程:

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

如何将值保持为已修改并将表单重置为其原始状态.

form.reset()只是清空表单.但是,如果我不调用它,状态不会被重置,例如我的验证取决于表单状态类(原始,脏,有效等)仍然存在.

Answer 1

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

您还可以将实际表单值提供给reset()方法.

鉴于事实myReactiveForm是组件中的Reactive表单.成功提交表单后(例如通过调用服务),您可以执行以下操作:

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

它将重置表单并将"新"表单值设置为您所形成的相同值.

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

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

所以，这是什么说的是，如果表单已不断被提交和控制变得无效（每个验证规则），那么将显示错误。这通常不是您想要的（特别是如果您正在阅读此问题！）。

查看源代码- submitted = false除非您调用resetFormngForm指令（而不是FormGroup对象），否则无法进行设置。将状态设置为原始状态或未更改状态不会重置为false。

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

还要注意，ErrorStateMatcher仅采用角材料-而不是标准角形式的一部分。

Answer 4

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

只是一行。IEthis.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: ''
   });
}