I have a situation where I am trying to access the second FormArray inside another FormArray. Here is an excerpt from my component:
registrationForm = new FormGroup({
registrations: new FormArray([this.patchRegistrationValues()])
});
patchRegistrationValues(): FormGroup {
return new FormGroup({
//some other FormControls
setDate: new FormArray([this.patchSetDate()]),
});
}
get registrations(): FormArray {
return this.registrationForm.get('registrations') as FormArray;
}
I am struggling with how to access the setDate for populating it. I attempted this method, but it did not work:
get setDate(): FormArray {
return this.registrations.get('setDate') as FormArray;
}
Can anyone provide guidance on how to achieve this? Is an index required?
UPDATE
Apologies for the delay in response, here is the HTML snippet I am working with:
<thead>
<tr>
<!-- TODO: add translation to table -->
<th>Project</th>
<th>Date</th>
<th>Buttons</th>
<th nzAlign="center" class="fit">
<app-add-btn (click)="addRegistrationRow()" label="{{'common.add' | translate}}"></app-add-btn>
</th>
</tr>
</thead>
<tbody formArrayName="registrations">
<tr *ngFor="let reg of registrations.controls; let i = index" [formGroupName]="i">
<td>
<!--FormControl goes here like an input-->
</td>
<td>
<ng-container *ngFor="let date of setDate.controls let ind = index" [formGroupName]="ind">
<!--Not so sure about this part, any input I set here doesn't show in the page, it's like a blank cell-->
</ng-container>
</td>
<td nzAlign="center" class="fit">
<app-delete-btn (click)="removeRegistrationRow(i)"></app-delete-btn>
<app-add-btn (click)="addSetDateRow()" label="{{'common.add' | translate}}"></app-add-btn> <!-- this doesn't work -->
</td>
</tr>
</tbody>
Once again, apologies for the delay!