在Angular 7中,可以使用reset()
方法重置表单。以下是重置表单的最佳方法示例:
在HTML模板中,使用ngForm
指令包裹表单,并在Form标签中添加#myForm
来引用表单:
在组件类中,通过@ViewChild
装饰器获取表单的引用,并使用reset()
方法重置表单:
import { Component, ViewChild } from '@angular/core';
@Component({
selector: 'app-my-form',
templateUrl: './my-form.component.html',
styleUrls: ['./my-form.component.css']
})
export class MyFormComponent {
@ViewChild('myForm', { static: false }) myForm;
resetForm() {
this.myForm.reset();
}
}
在上述示例中,resetForm()
方法可以通过调用myForm.reset()
来重置表单。确保在组件类中引入ViewChild
装饰器,并将其与表单引用进行关联。
然后,你可以在需要重置表单的地方调用resetForm()
方法即可。
请注意,reset()
方法将重置表单中的所有控件值,并将其状态设置为初始状态。