在反应式表单中重置一组formControls可以通过以下步骤实现:
下面是一个示例代码,演示如何在Angular中重置一组formControls:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-reset-form',
template: `
<form [formGroup]="myForm">
<input formControlName="name" placeholder="Name">
<input formControlName="email" placeholder="Email">
<button (click)="resetForm()">Reset</button>
</form>
`,
})
export class ResetFormComponent implements OnInit {
myForm: FormGroup;
ngOnInit() {
this.myForm = new FormGroup({
name: new FormControl(''),
email: new FormControl(''),
});
}
resetForm() {
Object.keys(this.myForm.controls).forEach(key => {
this.myForm.get(key).reset();
});
this.myForm.reset();
}
}
在上面的示例中,我们创建了一个包含两个formControl的FormGroup,并在模板中使用formControlName指令来绑定表单控件。点击Reset按钮时,调用resetForm()方法来重置表单。
请注意,上述示例中没有提及具体的腾讯云产品和链接地址,因为重置表单不涉及到云计算相关的内容。如果您有其他与云计算相关的问题,我将很乐意为您提供更多信息。
领取专属 10元无门槛券
手把手带您无忧上云