53

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

这是过程：

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

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

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

4

8 回答 8

90

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

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

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

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

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

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

于 2017-05-03T12:22:15.890 回答
30

这很容易：

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

这将重置表单元数据并且表单再次原始

于 2017-05-03T12:13:13.590 回答
22

@angular/components (material) 用户注意事项

如果您使用角度材质控件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 仅在角度材料中 - 而不是标准角度形式的一部分。

于 2019-01-05T03:15:38.143 回答
10

2020 年 4 月 6 日： Ionic 5+ 和 Angular 9+

就一行。IEthis.form.reset();

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

 form: FormGroup;

 constructor(private formBuilder: FormBuilder, ) { }

  resetTheForm(): void {
    this.form.reset();
  }
于 2020-06-04T13:11:50.303 回答
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();
}

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

于 2019-05-02T18:28:48.077 回答
2

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

在 HTML 中：

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

在 .TS 中：

formSubmit(myForm: NgForm) {
   myForm.resetForm(myForm.form.getRawValue());
}
于 2020-05-20T14:15:27.670 回答
2

有些时间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)
}
于 2020-07-13T08:01:31.077 回答
0

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

onClear() {
   this.formGroup.patchValue({
     fieldName: ''
   });
}
于 2021-11-21T12:53:00.957 回答