Привязать дочерний элемент содержимого к форме

Question

Есть ли способ привязать спроецированный шаблон (ContentChild) к форме, определенной для дочернего элемента, т.е. добавитьformControlNameкогда-то рендерил?

Я изо всех сил пытаюсь понять, что искать в Интернете, поскольку я могу использовать неправильные условия поиска.

Непроецируемый пример - это работает

У меня есть массив форм (конкретный пример) ниже, подключенный к средству доступа к управляющему значению.
Компонент имеет группу форм типаFormGroup<{ formArray: FormArray<{ formControl : FormControl }> }
но при изменении значения я испускаю только массив значений, т.е.formValue.formArray.map(v => v.formControl)
ТакformArrayи просто хранят имена внутри компонента.

Конкретный пример

      <fieldset [formGroup]="formGroup">
    <legend>Paving runs (minimum 1)</legend>

    <ng-container formArrayName="formArray">
        <fieldset *ngFor="let frmGrp of formGroup.controls.formArray.controls; let i = index">
            <legend>Paving run</legend>
            
            <ng-container [formGroup]="frmGrp">
                <!-- what I want to project in a reusable version-->
                <paving-run-form
                    formControlName="formControl">
                </paving-run-form> 
            </ng-container>

            <button (click)="remove(i)">Delete run</button>
        </fieldset>
    </ng-container>
    
    <button (click)="add()">Add run</button>
</fieldset>

Это довольно стандартно и работает, но теперь я пытаюсь создать повторно используемую версию этого компонента.

Чтобы я мог сделать что-то вроде:

      <generic-form-array formControlName="paved_runs" [labels]="labels">
    <ng-template editMode>
        <paving-run-form></paving-run-form>
    </ng-template>
</generic-form-array>

где метки в этом случае будут

      @Input() labels: GenericFormArrayOptions = {
    legendMany: "Paving runs (minimum 1)",
    legendOne: "Paving run",
    deleteOne: "Delete run",
    addOne: "Add run",
}

Спроецированный пример - что я пробовал

      <fieldset [formGroup]="formGroup">
    <legend>{{ labels.legendMany }}</legend>

    <ng-container formArrayName="formArray">
        <fieldset *ngFor="let frmGrp of formGroup.controls.formArray.controls; let i = index">
            <legend>{{ labels.legendOne }}</legend>
                
                    <ng-container [formGroup]="frmGrp">
                        <!-- project the form to edit one of array elements -->
                        <ng-container
                          [ngTemplateOutlet]="editModeTpl.templateRef">
                        </ng-container>
                    </ng-container>

            <button (click)="remove(i)">{{ labels.deleteOne }}</button>
        </fieldset>
    </ng-container>
    
    <button (click)="add()">{{ labels.addOne }}</button>
</fieldset>

Со следующим, определенным в классе:

      @ContentChild(EditModeDirective) editModeTpl!: EditModeDirective

т.е. использует директиву

      import { Directive, TemplateRef } from '@angular/core';

@Directive({
    selector: '[editMode]'
})
export class EditModeDirective {
    constructor(public templateRef: TemplateRef<any>) {}
}

В этом случае содержимое проецируется, как и ожидалось, но<paving-run-form></paving-run-form>не привязан к дочерней форме. Пытающийся<paving-run-form formControlName="formControl"></paving-run-form>не работает, потому что это ожидаетformControlна родителя.

Есть ли способ отобразить компонент, а затем добавить его в дочернюю форму?