使用表格外部的按钮以角度6重置模板表格

Question

在角度6中，我有一个带有以下标记的模板表格。

<form (ngSubmit)="onMyFormSubmit(myForm)" #myForm="ngForm">

此表单外部有一个按钮，应该隐藏一些元素并重置表单。该按钮是

<button (cbOnSuccess)="eraseThings()"> erase</button>

我必须以某种方式访问​​myForm来重置它。我的想法是做@ViewChild('myForm') form: ElementRef;，然后在eraseThings函数中，我会做

eraseCode(){
 this.hideTheDiv=true;
 this.myForm.reset();  
}

我得到Property 'myForm' does not exist on type 'AccountComponent'.

我在做什么错？如何重置表格？

谢谢

Answer 1

您已声明form而不是myForm，因此错误是正确的，myForm在您的组件中不存在。因此，您应该在组件中使用form。同样，您要使用NgForm而不是ElementRef，因为我们指向的是表单引用。因此，您的组件代码应如下所示：

@ViewChild('myForm') form: NgForm;

eraseCode() {
  this.form.reset();
}

演示：https://stackblitz.com/edit/angular-c6vfcq?file=src%2Fapp%2Fapp.component.ts

Answer 2

这里有多种选择，当您在html中定义表单时，可以在类似以下的函数中传递它：

(cbOnSuccess)="eraseThings(myForm)"

和ts：

eraseCode(form){
 this.hideTheDiv=true;
 form.reset();  
}

如果要在打字稿中将表单作为属性来进一步使用或修改，请查看反应形式。比使用ViewChild更好： https://angular.io/guide/reactive-forms