在Angular中,可以使用FormGroup
和FormControl
来创建和管理表单。要重置表单的值,可以使用reset()
方法。
下面是一个示例代码:
FormGroup
对象来管理表单:import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-my-form',
template: `
`,
})
export class MyFormComponent implements OnInit {
myForm: FormGroup;
ngOnInit() {
this.myForm = new FormGroup({
name: new FormControl(''),
email: new FormControl('')
});
}
onSubmit() {
// Handle form submission
console.log(this.myForm.value);
}
resetForm() {
this.myForm.reset();
}
}
formGroup
指令将myForm
对象与表单元素关联起来。使用formControlName
指令将FormControl
与相应的表单元素关联起来。添加一个重置按钮,并在点击按钮时调用resetForm()
方法。通过调用reset()
方法,可以将表单中的所有控件重置为其初始状态。这会将所有输入字段的值重置为空字符串或默认值。
注意:这里使用的是Angular的响应式表单(Reactive Forms)。确保在模块中导入FormsModule
和ReactiveFormsModule
。