Angular ReactiveForm с рекурсивным шаблоном не распознает родительскую директиву formGroup

Question

В моем приложении я динамически создаю formGroups из объекта конфигурации, который выглядит следующим образом:

const formElements: FormElementInterface[] = [
 {
   type: 'formControl',
   defaultIsArray: false,
   defaultValue: 'Apfel',
   formControlName: 'fruits',
   htmlTag: 'mat-input',
   inputIype: 'text'
  } as InputFormControlInterface,
];

FormElementInterface[] состоит из formControl объектов или formGroup объектов. Последний может содержать formControls или более formGroups.

Построение фактического formGroup, который называется completeForm, как вы увидите в шаблоне, прошло гладко, но внутри шаблона я встретил некоторыепроблема и получил эту ошибку:

formControlName должен использоваться с родительской директивой formGroup. Вы захотите добавить директиву formGroup и передать ей существующий экземпляр FormGroup (вы можете создать его в своем классе)

Это выдержка из моего шаблона:

<form [formGroup]="completeForm">
 <div *ngFor="let formElement of forms">
  <ng-container
    *ngTemplateOutlet="formElement.type === 'formGroup' ? formGroup : formControl; context:{$implicit: formElement}">
  </ng-container>
 </div>
</form>

<ng-template #formControl let-formElement>
  <span [ngSwitch]="formElement.htmlTag">
    <div *ngSwitchCase="'mat-input'">
      <mat-form-field class="example-full-width">
        <input matInput [value]="formElement.defaultValue" formControlName="fruits">
      </mat-form-field>
    </div>
  </span>
</ng-template>

Как видите, formGroup установлено. ng-template мешает?

Answer 1

Я нашел решение: из-за ng-template formControlName недостаточно, поскольку ng-template вроде испортило иерархию в шаблоне. Поэтому путь к formControl внутри formGroup должен быть указан следующим образом:

<input matInput [value]="formElement.defaultValue" [formControl]="getFormControl(formElement.formControlName)">