在不清除预填数据的情况下重置角度反应式表单,可以通过以下步骤实现:
initialFormValue
。initialFormValue
来重置表单的值。initialFormValue
。以下是一个示例代码:
import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'app-form',
template: `
<form [formGroup]="myForm">
<input type="text" formControlName="name">
<input type="email" formControlName="email">
<button (click)="resetForm()">重置</button>
</form>
`,
})
export class FormComponent {
myForm: FormGroup;
initialFormValue: any;
constructor(private fb: FormBuilder) {
this.myForm = this.fb.group({
name: ['John Doe'],
email: ['johndoe@example.com'],
});
this.initialFormValue = this.myForm.value;
}
resetForm() {
this.myForm.setValue(this.initialFormValue);
}
}
在上述示例中,我们使用FormBuilder
创建了一个包含name
和email
字段的表单,并将初始值设置为预填数据。在重置按钮的点击事件中,调用resetForm()
方法来重置表单的值,将其设置为初始值initialFormValue
。
这种方法可以在不清除预填数据的情况下重置角度反应式表单。
领取专属 10元无门槛券
手把手带您无忧上云