Question

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

以下是流程：

从服务结果

setValue

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

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

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

Answer 1

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

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

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

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

它将重置表单并设置＆＃34; new＆＃34;表格值与您所形成的值相同。

此方法可以在Tour of Hero示例Official Angular.io doc

中查看

Answer 2

这很简单：

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

这会重置表单元数据，表单又是原始的

Answer 3

针对角度/材质2用户的警告

如果您使用角度材质控件，则会增加一个复杂性，mat-error用于显示错误。根据{{1}}的结果显示此类错误（除了您可能已应用的任何ErrorStateMatcher之外）。

如果满足以下条件，default ErrorStateMatcher将显示错误：

*ngIf

所以这就是说，如果表单已提交且控件变为无效（根据验证规则），则会显示错误。这通常不是您想要的（特别是如果您正在阅读此问题！）。

查看源代码-无法设置isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean { return !!(control && control.invalid && (control.touched || (form && form.submitted))); }，除非您对ngForm指令（不是FormGroup对象）调用resetForm。将状态设置为原始状态或未更改状态不会重置为false。

如果您使用的是submitted = false，则可能会发现为自定义逻辑创建自己的ErrorStateMatcher（简单接口）会更容易。

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

Answer 4

2020年6月6日：离子5+和Angular 9 +

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

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

 form: FormGroup;

 constructor(private formBuilder: FormBuilder, ) { }

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

Answer 5

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

在HTML中：

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

.TS中的

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

Answer 6

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

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

7 个答案:

针对角度/材质2用户的警告