Unable to update the angular dynamic reactive form controls

I am trying to create a dynamic angular reactive form. And able to construct a form fields with the below code, but unable to edit the form controls.

export class BillerDetailsConfirmComponent implements OnInit {
billerForm!: FormGroup;

constructor(
private router: Router,
private dialogService: NbDialogService,
private fb: FormBuilder,
private dashboardService: DashboardService,
private subScriptionService: SubscriptionService,
private cdr: ChangeDetectorRef
) {}

ngOnInit(): void {
this.initializeForm();
this.getCompleteBillerDetails();
}

initializeForm(): void {
this.billerForm = this.fb.group({
billerDetails: this.fb.array([])
});
}

getCompleteBillerDetails(): void {
const billersSubscription = this.dashboardService.getAllBBPSBillers().subscribe(
(respData: any) => {
if (respData.respCode === '00') {
console.log('API Response:', respData.response);
this.populateFormArray(this.billerDetails, respData.response.billerDetails);

}
},
(error: any) => {
console.error('Error fetching biller details:', error);
}
);
this.cdr.detectChanges();

this.subScriptionService.add("billerCategorySubscription", billersSubscription);
}

populateFormArray(formArray: FormArray, data: any[]): void {
formArray.clear();
data.forEach(item => {
const formGroup = this.createFormGroup(item);
formArray.push(formGroup);
});
console.log('Form Array:', formArray);
}

createFormGroup(item: any): FormGroup {
const formGroup: { [key: string]: FormControl } = {};

Object.entries(item).forEach(([key, value]) => {
if (typeof value !== 'object') {
formGroup[key] = new FormControl(value ?? ''); // Ensure controls are created and enabled.
}
});

return this.fb.group(formGroup);
}

get billerDetails(): FormArray {
return this.billerForm.get('billerDetails') as FormArray;
}


getFormControlKeys(group: AbstractControl): string[] {
if (group instanceof FormGroup) {
return Object.keys(group.controls).filter(key =>
group.get(key) instanceof FormControl
);
}
return [];
}

getFieldChunks(keys: string[], size: number): string[][] {
const result = [];
for (let i = 0; i < keys.length; i += size) {
result.push(keys.slice(i, i + size));
}
return result;
}
}

View


<nb-tab tabTitle="Biller Details">
<div class="block-body">
<form [formGroup]="billerForm">
<div *ngFor="let billerGroup of billerDetails.controls; let i = index" [formGroup]="billerGroup">
<ng-container *ngIf="billerGroup?.controls">
<ng-container *ngFor="let chunk of getFieldChunks(getFormControlKeys(billerGroup), 3)">
<div class="row mb-4 justify-content-start">
<div class="col-md-4 d-flex flex-column" *ngFor="let key of chunk">
<label class="form-label">{{ key | titlecase }}</label>
<input nbInput class="w-100" [formControlName]="key" placeholder="Enter {{ key }}" fieldSize="large" />
</div>
</div>
</ng-container>
</ng-container>
</div>
</form>
</div>
</nb-tab>

Continue reading...