Angular 9中重置表单的原始状态可以使用reset()
方法。对于包含数组字段的表单,可以通过以下步骤来重置:
FormBuilder
和FormGroup
:import { FormBuilder, FormGroup } from '@angular/forms';
export class YourComponent {
form: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
arrayField: [[]] // 定义数组字段并初始化为空数组
});
}
}
<form [formGroup]="form">
<div formArrayName="arrayField">
<div *ngFor="let item of form.get('arrayField').controls; let i = index">
<input type="text" [formControlName]="i">
</div>
</div>
</form>
<button (click)="resetForm()">重置</button>
resetForm() {
this.form.reset(); // 重置整个表单
// 或者只重置数组字段
// this.form.get('arrayField').reset([]);
}
上述代码中,我们使用FormBuilder
来创建表单,使用formGroup
和formArrayName
指令将表单和数组字段与HTML元素进行绑定。在重置方法中,通过调用reset()
方法来将整个表单重置为原始状态,或者使用reset()
方法将数组字段重置为空数组。
关于Angular表单的更多信息和用法,请参考腾讯云开发者手册中的相关章节:Angular表单。
注意:本答案仅针对Angular 9中重置带有数组字段的表单,不包括云计算、IT互联网领域的其他概念或品牌商的信息。
领取专属 10元无门槛券
手把手带您无忧上云