要重新初始化Angular表单组,可以使用reset()
方法来重置表单的状态。以下是一个示例代码:
在组件类中定义一个表单组:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } 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 formBuilder: FormBuilder) { }
ngOnInit() {
this.myForm = this.formBuilder.group({
name: ['', Validators.required],
email: ['', [Validators.required, Validators.email]],
password: ['', [Validators.required, Validators.minLength(6)]]
});
}
onSubmit() {
// 表单提交逻辑
}
resetForm() {
this.myForm.reset();
}
}
在模板中添加一个“重置”按钮,并在点击按钮时调用resetForm()
方法:
这样,当点击“重置”按钮时,表单中的所有字段都会被清空,并且表单的状态会被重置为初始状态。