How to generate dynamic tab with data based on API in Angular8

Issue

I have below JSON response.

From JSON response i am creating dynamic tab and inside every tab i want to push formArray based on below mentioned condition.

**In below response,

const myObj = [
          {
            'TabName': 'Test1',
            'otherDetails': [
              {
                'processTechType': 'Continuous'
              },
              {
                'processTechType': 'Batch',
              },
            ]
          },
          {
            'TabName': 'Test2',
            'otherDetails': [
              {
                'processTechType': 'Batch'
              }
            ]
          }
        ];

For Ex - TabName Test1 and TabName Test2 are tabs name which i am displaying dynamically. Now in Test1 Tab, i want to push formArray Continuous and formArray Batch both forms. Because in Test1 Tab, i have processTechType array with Continuous and batch both. So it will show both form in Test1 Tab.

Ex - 2 -- Now in Test2 Tab, i want to push formArray Batch form only. Becuase in Test2 Tab, i have processTechType batch in otherDetails object. So it will show Batch form only in Test2 Tab.

My mean to say is everytime it will check the Tabname and otherDetails key from response and show forms based on processTechType array key on specific tab only.

I have below code. But it is pushing both forms in all tabs, not on specific tab. For ex - From my code, It is showing Continuous formArray onetime and Batch formArray two times in Test1 and Test2 tabs both.

Expected output -

In Test1 Tab, it will push one Continuous and one Batch form.

In Test2 Tab, It will show push batch form only.

Can anyone please help me get my code work to get my expected output.

getMakeLineData() {
    
    var otherDetails = myObj.filter(m => m.otherDetails).map(m => m.otherDetails);
    this.makeLineData = myObj;
    if (otherDetails) {
      otherDetails.forEach(element => {       
        for (var i of element) {
          if (i.processTechType === 'Continuous') {
            this.addQuantity();
          }
          else if (i.processTechType === 'Batch')  {
            this.addBatch();
          } 
        }
      });      
    } 
}

createContinuousForm() {
    return this.fb.group({
      designProcess: ['', [Validators.required]]
    });
  }
  createBatchForm() {
    return this.fb.group({
      avgBCT: ['', [Validators.required]]
    });
  } 
  continuousType(): FormArray {
    return this.dataCollectionForm.get("continuousType") as FormArray;
  }

  batchType(): FormArray {
    return this.dataCollectionForm.get("batchType") as FormArray;
  }

  addQuantity() {
    this.continuousType().push(this.createContinuousForm());

  }
  addBatch() {
    this.batchType().push(this.createBatchForm());
  }

HTML Template

<div class="tabGroupDiv row">
    <div class="lossLinesDiv">     
      <mat-tab-group class="lossMatGrpCls" mat-align-tabs="left">
        <mat-tab *ngFor="let lineData of makeLineData">
          <ng-template mat-tab-label>
                <button class="validatorTabBgClr">{{lineData.makeLineName}}</button>
          </ng-template>
          <form [formGroup]="dataCollectionForm" (ngSubmit)="onSubmit()">
            <!-- <--continuous Form start here -->  
            <div class="admin-console-main-wrapper" formArrayName="continuousType">
              <div class="content-wrapper" *ngFor="let lineItem of continuousType().controls; let i=index"
                [formGroupName]="i">
              
                <div class="row list-wrapper">
                  <div class="col-xs-3 col-md-3 deo-dv-list-wrapper">
                    <h5 class="topbar-items-text">Design Process Capacity (Tonnes)</h5>
                    <mat-form-field appearance="outline">
                      <input matInput type="text" class="line-fte-input smed-input" placeholder="Design Process Capacity"
                        formControlName="designProcess">
                    </mat-form-field>
                    <mat-error *ngIf="lineItem?.controls?.designProcess?.hasError('required')">
                      Field is required
                    </mat-error>
                  </div>
                </div>              
              </div>
            </div>  
            <!-- <--continuous Form start here -->
  
            <!-- <--Batch Form start here -->
            <div class="admin-console-main-wrapper" formArrayName="batchType">
              <div class="content-wrapper" *ngFor="let lineBatchItem of batchType().controls; let i=index"
                [formGroupName]="i">               
  
                <div class="row list-wrapper">
                  <div class="col-xs-3 col-md-3 deo-dv-list-wrapper">
                    <h5 class="topbar-items-text">Average BCT (mins)</h5>
                    <mat-form-field appearance="outline">
                      <input matInput type="text" class="line-fte-input smed-input" placeholder="Average BCT"
                        formControlName="avgBCT">
                    </mat-form-field>
                  </div>                 
                </div>
              </div>
            </div>  
            <!-- <--Batch Form ends here -->
          </form>
        </mat-tab>
      </mat-tab-group>
    </div>
  </div>

Solution

Your object is complex to relationa tabs and FormArrays, So, imagine you has a more confortable object. Some like

[{tabName:'Tab 1',continuousType:0,batchType:0},
 {tabName:'Tab 2',continuousType:1,batchType:-1}]

See that you use "-1" to indicate the tab has no a form of this type

For this create a function thah return this more confortable array

  tabsConfig(obj:any){
    const tab=[];
    let continuousType=0;
    let batchType=0;
    obj.forEach((x,index)=>{
      tab[index]={tabName:x.TabName,continuousType:-1,batchType:-1}
      x.otherDetails.forEach(y=>{
        if (y.processTechType=='Continuous')
            tab[index].continuousType=continuousType++
            if (y.processTechType=='Batch')
            tab[index].batchType=batchType++
      })
    })
    return tab
  }

Now you can use a variable to store the config

this.tabs=this.tabConfig(this.myObj)

You can then

this.tabs.forEach(x=>{
   if (x.continuousType!=-1)
     this.continuousType.push(this.createContinuousForm())
   if (x.batchType!=-1)
     this.batchType.push(this.createBatchForm())
})

And, if you has two auxiliars forms that return the formGroup of the of the FormArrays

getContinuousForm(index:number){
   return (this.dataCollectionForm.get("continuousType") as FormArray)
          .at(index) as FormGroup
}

getBatchForm(index:number){
   return (this.dataCollectionForm.get("batchType") as FormArray)
          .at(index) as FormGroup
}

You're ready to create the mat-tab iterating over the "tabs" array

<mat-tab-group >
   <mat-tab *ngFor="let tab of tabs;let i=index">
          <ng-template mat-tab-label>
                <button >{{tab.tabName}}</button>
          </ng-template>
          <form *ngIf="tab.continuousType!=-1
             [formGroup]="getContinuousForm(tab.continuousType)">
             ....
          </form>
          <form *ngIf="tab.batchType!=-1
             [formGroup]="getBatchForm(tab.batchType)">
             ....
          </form>
    </mat-tab>
</mat-tab-group>

Answered By - Eliseo