I am in the process of developing a dynamic form that consists of an array of payments. Users will have the ability to add new payments, delete existing ones from the array, and make edits.
Here is a snippet of the HTML code I am using:
<form [formGroup]="createLoanPaymentsForm" (ngSubmit)="createLoan()">
<ng-container formArrayName="createLoanPaymentsForm">
@for (
createLoanPaymentForm of createLoanPaymentsForm.controls; // encountering an error here
track $index
) {
<div [formGroup]="createLoanPaymentForm">
<mat-form-field appearance="fill">
<input matInput formControlName="title" placeholder="Lesson title" />
</mat-form-field>
</div>
}
<button mat-mini-fab (click)="addPayment()">Add</button>
</ng-container>
</form>
Below is the configuration details of my component:
@Component({
selector: 'app-create-loan-dialog',
standalone: true,
imports: [
MatInputModule,
MatButtonModule,
MatDialogTitle,
MatDialogContent,
MatDialogActions,
MatDialogClose,
ReactiveFormsModule,
MatStepperModule,
],
providers: [
{
provide: STEPPER_GLOBAL_OPTIONS,
useValue: { showError: true },
},
],
templateUrl: './create-loan-dialog.component.html',
})
This is how I have set up my FormGroup:
createLoanPaymentsForm: FormGroup = this.formBuilder.group({
payments: this.formBuilder.array([]),
});
While implementing the loop, I encountered an error message which states:
Type '{ [key: string]: AbstractControl<any, any>; }' must have a 'Symbol.iterator' method that returns an iterator.
I am actively seeking a solution to resolve this bug, especially for properly looping through a FormArray in Angular 17.