1

我迫不及待地想找到解决办法。这是我的个人资料页面结构：

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 填充它。

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

4

0 回答 0