Angular模板驱动表单提供了一种简单的方式来重置表单的值和状态。以下是一个示例代码,演示如何重置Angular模板驱动表单的值和状态:
import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';
@Component({
selector: 'app-my-form',
template: `
`
})
export class MyFormComponent {
name: string;
resetForm(form: NgForm) {
form.resetForm(); // 重置表单的值和状态
}
}
在模板中,使用ngForm
指令创建一个表单,并使用[(ngModel)]
绑定输入框的值到组件中的name
属性。在按钮的点击事件中调用resetForm
方法来重置表单。
在resetForm
方法中,调用form.resetForm()
方法来重置表单的值和状态。这会将表单的值重置为初始状态,并将所有表单控件的状态标记为未修改、未触摸和有效。
这样,当用户点击“重置表单”按钮时,表单中的输入框将被清空,并且表单控件的状态将被重置为初始状态。