Upon receiving a response from the API, this is what I get:
const myObj = [
{
'tabName': 'Tab1',
'otherDetails': [
{
'formType': 'Continuous'
},
{
'formType': 'Batch',
}
]
},
{
'tabName': 'Tab2',
'otherDetails': [
{
'formType': 'Batch',
}
]
}
];
In the function below, I am processing tabs and pushing form arrays based on API data. The issue at hand is that both continuous and batch forms are appearing multiple times in every tab.
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.formType === 'Continuous') {
this.continuousType().push(this.createContinuousForm());
} else if (i.formType === 'Batch') {
this.batchType().push(this.createBatchForm());
}
}
});
}
}
I need help creating the correct logic to achieve the desired outcome.
Based on the above response, I need to iterate through dynamic tabs and push batch and continuous forms related to each tab.
Expected output -
In Tab1 - Both Continuous and Batch form arrays should be pushed because in the response of Tab1 there are both batch and continuous form types in the otherDetails key.
In Tab2 -Only the batch form array should be pushed because in the response of Tab2 there is only the batch form type in the otherDetails key.
Here is my HTML:
<mat-tab-group class="lossMatGrpCls" mat-align-tabs="left">
<ng-container *ngFor="let lineData of makeLineData">
<mat-tab>
<button class="validatorTabBgClr">{{lineData.tabName}}</button>
<div *ngFor="let line of lineData.otherDetails">
<form [formGroup]="dataCollectionForm" (ngSubmit)="onSubmit()">
<!-- <--continuous Form start here -->
<div *ngIf="line && line.formType === 'Continuous'">
<div class="admin-console-main-wrapper" formArrayName="continuousType">
<div class="content-wrapper" *ngFor="let lineItem of continuousType().controls; let i=index"
[formGroupName]="i">
<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>
</div>
</div>
</div>
<!-- <--continuous Form start here -->
<!-- <--Batch Form start here -->
<div *ngIf="line && line.formType === 'Batch'" class="admin-console-main-wrapper"
formArrayName="batchType">
<div class="content-wrapper" *ngFor="let lineBatchItem of batchType().controls; let i=index"
[formGroupName]="i">
<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>
<!-- <--Batch Form ends here -->
</form>
</div>
</mat-tab>
</ng-container>
</mat-tab-group>