I'm facing an issue with adding 2 dynamic input fields to my form.
<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);
}
However, I encounter the following error:
ERROR Error: Cannot find control with path: 'details -> 0'
This is the result I expect:
{
details: [
{ label: "My label 1", description: "My description 1" },
{ label: "My label 2", description: "My description 2" }
]
}
How can I achieve my desired outcome?