Создайте многошаговую форму с помощью ngb-tabset и селекторов - PullRequest
Новая
       43

Создайте многошаговую форму с помощью ngb-tabset и селекторов

0 голосов
/ 23 января 2019

У меня есть большая форма с шагами, я реализовал все входные данные в одном 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
...