How to implement child component with FormControl inside FormArray

Question

We have an Angular FormArray containing an array of FormControls, and we haven't been able to figure out how to place the FormControls inside child components. We've got everything working great when we have FormGroups inside the FormArray - the child components receive as inputs the parent FormGroups (usually with name equal to the index in the FormArray), and the child component simply wraps the FormControls with the parent FormGroup. When we have FormControls directly inside the FormArray, however, we have yet to be able to have it bind correctly to the backing form objects when the FormControls are inside child components.

I have yet to find a single example of this in my searches. Any help will be greatly appreciated.

Update: Here is an example of a backing form structure where we cannot figure out how to bind the FormControls inside child components...

 favoriteColors: FormArray {
  controls: [
    0: FormControl { },
    1: FormControl { },
    2: FormControl { },
  ],
  value: ...
}

Here is how we handle that entire FormArray without using child components...

<div [formGroup]="formGroup">
  <div [formArrayName]="field.shortName">
    <label>{{field.title}}</label>
    <div *ngFor="let simpleQuestion of formArray.controls; let i = index">
      <!-- How do we put this inside a child component!?!? BEGIN -->
      <input [formControlName]="i">
      <!-- END -->
    </div>
  </div>
</div>

Here is an example of a backing form structure that is easy to work with child components...

favoriteVacationSpots: FormArray {
  controls: [
    0: FormGroup {
      controls: {
        name: FormControl { },
        city: FormControl { },
        state: FormControl {  },
      },
      value: ...
    },
    1: FormGroup {
      controls: {
        name: FormControl { },
        city: FormControl { },
        state: FormControl {  },
      },
      value: ...
    }
  ],
  value: ...
}

Here is how we handle child components inside FormArrays for the above form (works great due to each item in FormArray being a FormGroup)...

child.component.ts

<div [formGroup]="containingControl">
  <label>Name:</label>
  <input formControlName="name"><br/>
  <label>City:</label>
  <input formControlName="city"><br/>
  <label>State:</label>
  <input formControlName="state"><br/>
</div>

What we are trying to do is obviously way more complex than the above, but this captures the essence of the problem. We are trying to dynamically generate any of a variety of components at runtime inside FormArrays, but this is causing us quite a bit of frustration.