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>

Potentially an answer to my own question… just not sure if this is the best way to do this. Pulled the [formGroup] out of the ion-item, and added it to the parent ng-container. That lets me do the following:

      <ion-item-group fromArrayName="equip">
        <ng-container *ngFor="let machine of equip.controls; let i=index" [formGroup]="machine">
          <ion-item *ngIf="machine.controls.machine.value as mach">
            <ion-label>{{ mach.number }}: {{ mach.makeModel }}</ion-label>
            <ion-input formControlName="timeUsed">
          </ion-item>
          <ng-container formArrayName="options">
              <ion-item *ngFor="let opt of machine.controls.options.controls" [formGroup]="opt">
                <ion-label>{{ optionName(opt) }}</ion-label>
                <ion-input formControlName="timeUsed"></ion-input>
              </ion-item>
          </ng-container>
        </ng-container>
      </ion-item-group>

Seems… messy. If anyone has any thoughts on how to make this a bit more sane/maintainable, I’m all ears.