Question

我有一个很大的形式，其中包含多个子组件（将值作为@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)">

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

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

Angular 6-提交后重置表格无效

1 个答案: