Question

我有一个包含步骤的大型表单，我在同一个html文件中实现了所有输入，然后尝试使用这些步骤构建一个表单控件。我的html文件在

之前看起来像这样

<ngb-tabset #t="ngbTabset">
    <ngb-tab title="Fase 1 " id="fase1">
       <ng-template ngbTabContent>
            stuff..
       </ng-template> 
    </ngb-tab>

    <ngb-tab title="Fase 2 " id="fase2">
       <ng-template ngbTabContent>
             stuff..
     </ng-template> 
    </ngb-tab>    
</ngb-tabset>

我的formGroup就是这样

initResourceForm() {
    this.resourceForm = this.formBuilder.group({
        id: [0],
        inputStuff: [''],
        ...
        })
}

然后，我为每个表单步骤创建了组件，以便使用选择器并缩短html文件。因此，我将formGroup分了几步，现在看起来像这样，

initResourceForm() {
    this.resourceForm = this.formBuilder.group({
        id: [0],
        fase1: this.formBuilder.group({
            stuffFase1: [''],
            ...
        }),
        fase2: this.formBuilder.group({
            stuffFase1: [''],
            ...
        }),
    })
}

我的html文件看起来像

<ngb-tabset #t="ngbTabset">
    <app-fase1></app-fase1>
    <app-fase2></app-fase2>
</ngb-tabset>

每个案例的html文件都有一个<ngb-tab>，看起来像

<ngb-tab title="Fase 1 " id="fase1">
  <ng-template ngbTabContent>
    <form [formGroup]="resourceForm.controls.fase1">
     stuff...

    <p>
      <button class="btn btn-outline-primary" (click)="t.select('fase2');">Next</button>
    </p>

  </ng-template> 
</ngb-tab>

我在Fases组件中没什么特别的，任何组件都在主窗体组件中呈现

为了澄清我的问题，树形文件夹就是这种方式

main-form/
  fase1-form/
     fase1.component.html
     fase1.component.ts
     fase1.component.spec.ts
     fase1.component.css
  main-form.component.html
  main-form.component.ts
  main-form.component.spec.ts
  main-form.component.css

使用ngb-tabset和选择器构建多步骤表单

0 个答案: