有两种方式可以重置Angular表单。
方式一:
在form标签中使用局部变量来引用表单,然后通过调用局部变量中的reset方法来重置表单。
HTML代码示例:
在上面的代码中,我们使用了Angular的ngForm指令来定义了一个表单,并且使用了局部变量 myForm
来引用它。然后,在按钮的 click 事件中,我们可以通过调用 myForm.reset()
方法来重置表单。
方式二:
在组件中使用 @ViewChild 装饰器来引用表单,然后调用 nativeElement 中的 reset() 方法。
TypeScript 代码示例:
import { Component, ViewChild } from '@angular/core';
@Component({
selector: 'app-my-component',
template: `
`
})
export class MyComponent {
@ViewChild('myForm') myFormRef;
submitForm() {
console.log('submitting form...');
}
resetForm() {
this.myFormRef.nativeElement.reset();
}
}
在上面的代码中,我们使用了 ViewChild
装饰器来引用了在模板中定义的表单。然后,在 resetForm()
方法中,我们可以通过 nativeElement
属性访问表单的 DOM 元素,并且调用其中的 reset()
方法来重置表单。
请注意,第二种方式需要将表单的 template-driven
功能开启,并且在组件中引用它。