Angular 响应式表单：提交后如何重置表单状态并保留值

Question

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

过程如下：

从服务结果

setValue

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

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

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

Answer 1

这很简单：

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

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

Answer 2

@smnbbrv 的解决方案非常有效。

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

考虑到 myReactiveForm 在您的组件中是一个 Reactive 表单。成功提交表单后（例如通过调用服务），您可以执行以下操作：

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

它将重置表单并将 "new" 表单值设置为与您的表单相同的值。

这个方法可以在英雄之旅示例中看到Official Angular.io doc

Answer 3

@angular/components (material)

用户注意事项

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

default ErrorStateMatcher 显示基于布尔值的错误：

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

所以这在英文中的意思是：

If the form has ever been submitted and one if its controls becomes invalid (per validation rules) then the error will be displayed.

这通常不是您想要的（尤其是当您正在阅读这个问题时！）。

查看源代码 - 除非您在 ngForm 指令（而不是 FormGroup 对象）上调用 resetForm，否则无法设置 submitted = false。将状态设置为 pristine 或 untouched 不要将 submitted 重置为 false。

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

注意：ErrorStateMatcher 仅在 angular material 中 - 而不是标准 angular 表单的一部分。

Answer 4

对于反应式表单，在使用 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 5

添加另一个答案，如果您的表单中有禁用输入，请使用 getRawValue() 作为 ngForm.resetForm() 的参数。查看示例：

在HTML中：

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

在 .TS 中：

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

Answer 6

04-06-2020： 离子 5+ 和 Angular 9+

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

Resets the FormGroup, marks all descendants are marked pristine and untouched, and the value of all descendants to null.

 form: FormGroup;

 constructor(private formBuilder: FormBuilder, ) { }

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

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

Angular 响应式表单：提交后如何重置表单状态并保留值

Angular Reactive forms : how to reset form state and keep values after submit

angular

typescript

angular-reactive-forms

@angular/components (material)