Как сгенерировать форму Dynami c с дочерним компонентом

Question

Я реализую динамическую c форму, которую можно создать с помощью кнопки «добавить». эта форма Dynami c также является компонентом, мы назвали дочерний компонент.

родительский компонент выглядит примерно так:

<div *ngFor="let station of stationFormData.controls; let stationFormIndex = index"
         class="list-group list-group-flush">
      <div [formGroup]="station">
          <app-charge-station-modification-contact [contacts]="stations[stationFormIndex]?.contact"[form]="station"></app-charge-station-modification-contact>
 </div>
<button mat-icon-button matTooltip="Add New Station" (click)="addNewStation()">
      <mat-icon class="add-button-enabled-color">add</mat-icon>
    </button>
          
</div>

, а эта функция addNewStation выглядит так:

public addNewStation(): void {
    console.log(this.stations);
    this.stationFormData.push(this.fb.group({
      contact: this.fb.array([this.fb.group({
        name: { value: '', disabled: false },
      })]),
      })]),
      
    }));
  }

, поэтому этот метод создаст новую форму с именем contact.

этот контакт является дочерним компонентом.

выглядит так:

<div fxLayout="row" class="parameterWrapper">
  <div class="parameterLabel">contact</div>
    <div *ngFor="let contactForm of contactFormData.controls; let contactFormIndex = index"
       class="list-group list-group-flush">
    <div [formGroup]="contactForm">
      <div fxLayout="row" class="parameterWrapper">
        <div class="parameterLabelStep">name</div>
        <label>
          <input class="parameterInput" type="text" formControlName="name"
                 [disabled]="contactForm.controls.name.disabled"
                 [value]="contactForm.controls.name">
        </label>
      </div>
        </div>
      </div>
    </div>
  </div>
</div>

моя проблема, я не знаю, как реализовать динамическую c форму, которая создается дочерним компонентом.

Я пробовал несколько раз, но всегда получал ошибки.

любые решения?