I don’t think this is a bug or missing feature; I believe you’re trying to misuse form controls.

If your child component has an array of controls, then it’s not a control. It would be an anti-pattern to have form controls inside something that’s a form control itself: this is what form groups (FormGroup) and form arrays (FormArray) have been created for. Your component is simply a component that should somehow be made aware that its controls are part of an externally created form. Not a control itself.

I haven’t checked out ngx-sub-form which @maxime1992 suggested above, but I guess it’s a nice wrapper around a technique I’ve described in this StackOverflow answer: https://stackoverflow.com/a/46025197/2131286.

Basically, if you put a formGroup, formGroupName, formArray or formArrayName on a component, then that component can pick up something called Control Container through injection. Inject ControlContainer in the reusabile component, and ControlContainer#control will give you the control, decided by formArrayName or similar.

This example, combined with the code from my previous comment, does what you want it to.

<div>
  <form [formGroup]="topForm">
    <input formControlName="f1" />
    <div class="mt-3" *ngFor="let control of topForm.get('anArray')!.controls">
      <input [formControl]="control.get('field1')" />
      <input [formControl]="control.get('field2')" />
      <app-child [control]="control.get('child')"></app-child>
    </div>
  </form>
</div>

I’ll point out the obvious, you still have complete access to topForm from the parent component.

Like I have to handle lots of logic in parent component (which should be not needed manually if we have something like ArrayValueAccessor).

I’m not sure what you mean by this. What do you think a hypothetical ArrayValueAccessor would do for you?