要重置Angular 7的响应式表单并获取其初始值,可以使用patchValue
方法将表单的值初始化为初始值。
以下是一个示例代码:
在组件中定义表单:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
myForm: FormGroup;
initialFormValue: any;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.myForm = this.formBuilder.group({
firstName: '',
lastName: '',
email: ''
});
// 保存初始值
this.initialFormValue = this.myForm.value;
}
resetForm() {
// 重置表单为初始值
this.myForm.patchValue(this.initialFormValue);
}
}
在模板中使用表单和重置按钮:
在resetForm
方法中,我们使用patchValue
将表单的值设置为初始值。这将重置表单并将其值恢复为初始值。
请注意,initialFormValue
变量用于保存初始值,在ngOnInit
中初始化。这样我们就可以在需要时使用它来重置表单。