Best practice for building nested forms in Ionic using Angular reactive forms

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>

1 post - 1 participant

Read full topic