使用表单外的按钮以 Angular 6 重置模板表单答案

【问题标题】：reset template form in angular 6, using button outside the form使用表单外的按钮以 Angular 6 重置模板表单
【发布时间】：2018-07-12 10:49:18
【问题描述】：

在 Angular 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'.

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

谢谢

【问题讨论】：

【解决方案1】：

您声明了form 而不是myForm，所以错误是正确的，myForm 在您的组件中不存在。所以你应该在你的组件中使用form。您还想要使用NgForm 而不是ElementRef，因为我们指向表单引用。所以你的组件代码应该是这样的：

@ViewChild('myForm') form: NgForm;

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

【讨论】：

谢谢。很好的观察，但我仍然得到Cannot read property 'reset' of undefined，this.form.reset();。是的，我也不知道。我又错过了什么？ on submit 功能是否冲突？就像onMyFormSubmit(myForm: any){...。我搞不清楚了。我讨厌成为新手...
能否请您将自己的代码添加到 stackblitz 并在那里重现问题。
在我的原始代码中，名称不同，但问题是相同的。我还使用ngxClipboard 模块将内容复制到剪贴板。 stackblitz link
您已将表单命名为mailForm，因此在组件代码中应该是@ViewChild('mailForm') form: NgForm;，然后是this.form.reset()。
@codebot 有一个示例...stackblitz.com/edit/…

【解决方案2】：

这里有几个替代方案，当您在 html 中定义表单时，您可以将其传递给如下函数：

(cbOnSuccess)="eraseThings(myForm)"

在 ts 中：

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

如果您想将表单作为 typescript 中的属性以供进一步使用或修改，请查看响应式表单。比使用 ViewChild 更好： https://angular.io/guide/reactive-forms

【讨论】：