在Angular中,可以使用reset()
方法来重置响应式表单的值。以下是一个示例:
首先,在组件的HTML模板中,定义一个响应式表单:
然后,在组件的TypeScript文件中,创建一个FormGroup对象,并在组件的构造函数中初始化它:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'app-my-form',
templateUrl: './my-form.component.html',
styleUrls: ['./my-form.component.css']
})
export class MyFormComponent implements OnInit {
myForm: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.myForm = this.fb.group({
name: '',
email: ''
});
}
resetForm() {
this.myForm.reset();
}
}
在上面的代码中,我们使用FormBuilder
来创建一个FormGroup
,并在ngOnInit()
方法中初始化它。然后,在resetForm()
方法中调用reset()
方法来重置表单的值。
最后,将MyFormComponent
添加到需要使用该表单的模块中,并在模块的HTML模板中使用
来引用该组件。
当点击"Reset"按钮时,resetForm()
方法会被调用,表单的值会被重置为空。