在Angular 7中,可以使用form.resetForm()
方法重置模板驱动表单。
下面是一个示例解决方法:
首先,在组件的HTML模板中,给表单添加一个本地引用变量,例如#myForm
:
然后,在组件的代码中,使用@ViewChild
装饰器获取对表单的引用,并在需要重置表单的地方调用resetForm()
方法:
import { Component, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';
@Component({
// 组件的元数据
})
export class MyComponent {
@ViewChild('myForm', { static: false }) myForm: NgForm;
resetForm() {
this.myForm.resetForm();
}
}
在上述代码中,我们使用@ViewChild
装饰器获取了myForm
引用,并在resetForm()
方法中调用了resetForm()
方法来重置表单。
最后,在需要重置表单的地方,调用resetForm()
方法即可:
这样,当按钮被点击时,resetForm()
方法将被调用,从而重置表单。