I am having some issues with building a nested form using an ionic list using angular reactive forms. I have a form that has the following structure. Each of the root level FormGroups (e.g.- details
, time
) are steps in a wizard. The deeply nested group is time
, which is where the issue is:
this.form = new FormGroup({
details: new FormGroup({ ... details controls }),
time: new FormGroup({
totalTime: new FormControl(0),
equip: new FormArray([
new FormGroup({ // Machine 1
machine: new FormControl(machine1),
timeUsed: new FormControl(0),
options: new FormArray([ // Each machine can have 0 or more options
new FormGroup({ // Machine 1, Option 0
opt: new FormControl(machine1.options[0]),
timeUsed: new FormControl(0),
}),
new FormGroup({ // Machine 1, Option 1
opt: new FormControl(machine1.options[1]),
timeUsed: new FormControl(0),
}),
])
})
]),
}),
... more steps in the wizard
})
My issue is that when I go to build the template for this form, I can create a list, add the control for totalTime
, and then insert a list-group attached to the equip
FormGroup
, but I am not sure how to embed another list for the options. When I insert a list inside of an ion-item, it doesn’t render. Any thoughts on how to accomplish this would be greatly appreciated. See template code below:
<form [formGroup]="form">
<ng-container *ngIf="step === 1">
<!-- Render details form components -->
</ng-container>
<ng-container *ngIf="step === 2">
<!-- Render time form components -->
<ion-list formGroupName="time">
<ion-item>
<ion-label>Total Time:</ion-label>
<ion-input formControlName="totalTime"></ion-input>
</ion-item>
<ion-item-group fromArrayName="equip">
<ng-container *ngFor="let machine of equip.controls; let i=index">
<ion-item *ngIf="machine.controls.machine.value as mach" [formGroup]="machine">
<ion-label>{{ mach.number }}: {{ mach.makeModel }}</ion-label>
<ion-input formControlName="timeUsed">
<!-- I NEED TO INSERT A SUB-LIST OF MACHINE OPTIONS HERE -->
</ion-item>
</ng-container>
</ion-item-group>
</ion-list>
</ng-container>
</form>