角度形式的组件

Question

我非常渴望找到解决方案。 这是我的个人资料页面结构：

private formSections: any[] = [
{title: 'General information',     name: 'general'},
{title: 'Financial Information',   name: 'financial'},
{title: 'Languages',               name: 'languages'},
{title: 'Education',               name: 'education'},
{title: 'Featured Skills',         name: 'skills'},
{title: 'Certificates',            name: 'certificates'},
{title: 'Experience',              name: 'experience'},  
...];

每个部分应该包含一个不同的表单，包括选择，输入，日期选择，可拖动项目，筹码等。但同时它应该是一个一个大表单，将发布到服务器。

由于它是一个相当大的表单元素，并且它们在我的布局中以可视方式分开，因此将它们拆分为组件是明智的。 但我在网上找不到如何实现这一目标的任何例子。

以下是我的主要组件的样子：

// profile.component.html
<form [formGroup]="profileForm" novalidate (ngSubmit)="save(profileForm)"> 
  <div id="{{section.name}}" *ngFor="let section of formSections">
    <div class="editprofile-title">{{section.title}}</div>
    <div class="editprofile-form" >
      <div *ngIf="section.name=='general'"
           [group]="profileForm"
           profileGeneralFormComp ></div>

      <div *ngIf="section.name=='financial'"
           profileFinancialFormComp
           [group]="profileForm"></div>

      <div *ngIf="section.name=='languages'"
           profileLanguagesFormComp
           [group]="profileForm"></div>

      <div *ngIf="section.name=='education'"
           profileEducationFormComp
           [group]="profileForm"></div>

      <div *ngIf="section.name=='skills'"
           profileSkillsFormComp
           [group]="profileForm"></div>

      <div *ngIf="section.name=='certificates'"
           profileCertificatesFormComp
           [group]="profileForm"></div>

      <div *ngIf="section.name=='experience'"
           profileExperienceFormComp
           [group]="profileForm"></div>

      <div *ngIf="section.name=='links'"
           profileLinksFormComp
           [group]="profileForm"></div>

    </div>
  </div>
</form>

主要的困难是我不能将父formGroup传递给我的组件并用formControls填充它。

任何帮助/建议将不胜感激。