Angular 6 - 提交后重置表单不起作用答案

【问题标题】：Angular 6 - reset form after submit don't workAngular 6 - 提交后重置表单不起作用
【发布时间】：2019-01-11 09:04:23
【问题描述】：

我有一些包含多个子组件的大表单（值作为@input 发送给它们）。单击提交按钮后，应清除所有字段（并且不应显示验证错误）。我尝试以几种不同的方式重置表单，但没有任何效果。

我在 .html 中编写了 createForm.reset() 或 createForm.resetForm() 文件

<form #createForm="ngForm" (ngSubmit)="addExpense(createForm.value); createForm.resetForm()">

第二种方法

.ts

@ViewChild('createForm') formValues;

  addExpense(form): void {
    this.expenseService.addExpense(this.expense).subscribe(() => {
      this.formValues.resetForm();
      console.log('Form reset done!');
    );
  }

.html:

<form #createForm="ngForm" (ngSubmit)="addExpense(createForm.value)">

这也不会重置表单，不会显示错误。当我查看控制台时，我看到“表单重置完成！”。

【问题讨论】：

使用 this.formValues.reset();
@KrishnaRathore 我仍然收到“表单重置完成！”在控制台中，但字段中的值不会被清除

标签： angular angular6

【解决方案1】：

使用 ChangeDetectorRef 检测变化

constructor(private cd:ChangeDetectorRef){
}

@ViewChild('createForm') formValues;

  addExpense(form): void {
    this.expenseService.addExpense(this.expense).subscribe(() => {
      this.formValues.resetForm();
      this.cd.markForCheck()
      console.log('Form reset done!');
    );
  }

【讨论】：

'表格重置完成！'显示在控制台中，没有任何内容被清除。也许它发生的原因是因为所有需要清除的字段都在其他组件（子组件）中。谢谢你试图帮助我；）
@tzm 这是正确的方法。如果要重置的值在其他组件中，那么这些组件中的每一个都需要执行此操作。我首选的方法是给每个子组件一个reset 方法，让它们都改变值，然后调用.markForCheck()
@Vlad274 当我尝试手动重置此值时（例如 this.epense.name = ''），我收到验证错误。是否有一些选项可以手动重置值然后清除验证错误？
@tzm 似乎stackoverflow.com/questions/34608361/… 中的解决方案可能正是您想要的