向表单中添加动态字段

Question

我正试图在表单中添加2个动态输入字段。

<div formArrayName="details">
<div *ngFor="let detail of _detailRowNumber; index as i">
<mat-form-field appearance="fill">
<mat-label>Label of a detail</mat-label>
<input id="detail-label" matInput type="text" [formControlName]="i">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Description of a detail</mat-label>
<input id="detail-description" matInput type="text" [formControlName]="i">
</mat-form-field>
<button type="button" *ngIf="_detailRowNumber.length > 1" (click)="decreaseDetailRow(detail)" mat-fab color="primary" aria-label="Remove a new row from the detail list">
<mat-icon>remove</mat-icon>
</button>
<button type="button" (click)="increaseDetailRow(i)" mat-fab color="primary" aria-label="Add a new row to the detail list">
<mat-icon>add</mat-icon>
</button>
</div>
</div>

_detailRowNumber: Array<number> = [0];
details: FormGroup = new FormGroup({
details: new FormArray([
new FormControl('label'),
new FormControl('description')
])
})
fields: string[] = [];
formMain = this.fb.group({
details: this.details
});
increaseDetailRow(index: number): void {
this._detailRowNumber.splice(++index, 0, Date.now());
}
decreaseDetailRow(index: number): void {
this._detailRowNumber = this._detailRowNumber.filter((item) => item != index);
}

但我得到了这个错误：

错误：找不到路径为'details->的控件；0'

这就是我所期望的：

{
details: [
{ label: "My label 1", description: "My description 1" },
{ label: "My label 2", description: "My description 2" }
]
}

那么我该如何实现我的目标呢？

Answer 1

您的details表单控件应该是带有FormGroup的FormArray，而不是带有FormControl的FormArray，以便实现所附的预期结果。

<div [formGroup]="formMain">
<div formArrayName="details">
<div *ngFor="let detail of _detailRowNumber; index as i">
<ng-container [formGroupName]="i">
<mat-form-field appearance="fill">
<mat-label>Label of a detail</mat-label>
<input
id="detail-label"
matInput
type="text"
formControlName="label"
/>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Description of a detail</mat-label>
<input
id="detail-description"
matInput
type="text"
formControlName="description"
/>
</mat-form-field>
<button
type="button"
*ngIf="_detailRowNumber.length > 1"
(click)="decreaseDetailRow(detail)"
mat-fab
color="primary"
aria-label="Remove a new row from the detail list"
>
<mat-icon>remove</mat-icon>
</button>
<button
type="button"
(click)="increaseDetailRow(i)"
mat-fab
color="primary"
aria-label="Add a new row to the detail list"
>
<mat-icon>add</mat-icon>
</button>
</ng-container>
</div>
</div>
</div>

ngOnInit() {
this.formMain = this.fb.group({ details: this.fb.array([]) });
this.addDetailsFormGroup();
}
addDetailsFormGroup() {
(this.formMain.controls.details as FormArray).push(
new FormGroup({
label: new FormControl('label'),
description: new FormControl('description'),
})
);
}
increaseDetailRow(index: number): void {
this._detailRowNumber.splice(++index, 0, Date.now());
this.addDetailsFormGroup();
}
decreaseDetailRow(index: number): void {
this._detailRowNumber = this._detailRowNumber.filter(
(item) => item != index
);
(this.formMain.controls.details as FormArray).removeAt(index);
}

StackBlitz 演示