Question

最近，我开始使用Angular和ng-bootstrap进行开发。我正在借助包含一些FormControl和嵌套FormArray的Reactive Forms来处理表单。对于FormArray中的每个元素，我想显示一个子组件，该子组件属于ng-bootstrap的Tabset组件的选项卡，但是该子组件无法呈现。

该窗体分为两个组件：MainForm和SubForm。 MainForm为FormArray中的每个元素包含一些FormControl，一个FormArray，一个Tabset实例和一个SubForm实例。 SubForm是Tabset的选项卡，其中包含一些输入字段的嵌套表单。

当我渲染MainForm时，将触发一个API调用并返回一些数据以填充表单。 MainForm的FormControls和FormArray已填充，但SubForm无法呈现。

我使用Stackblitz在link中以最小的配置重现了这个问题。

Answer 1

这里的问题是NgbTabSet组件无法初始化在NgbTab内部创建的SubForm指令，因为NgbTabSet要求NgbTab为{{3 }}

这意味着您必须将ngb-tab中的ngb-tabset个元素保留为投影内容：

main-form.component.html

<ngb-tabset type="pills" [destroyOnHide]="true">
  <ngb-tab *ngFor="let hobbie of hobbies.controls; let i=index" [attr.id]="index">
    <ng-template ngbTabTitle>
      <span>Hobbie {{ i + 1 }}</span>
    </ng-template>
    <ng-template ngbTabContent>
        <app-sub-form [subForm]="hobbie"></app-sub-form>
    </ng-template>
  </ngb-tab>
</ngb-tabset>

我还认为这会迫使您保持SubForm组件不依赖于NgbTabSet，因此您可以在其他地方使用此表单。

ContentChildren

如何使用子组件使用Tabset组件创建动态选项卡？

1 个答案: