How to set json array value to multiple accordian forms in angular 6?

Question

I'm using multiple accordion forms in same page. If we click on Add button, I'm just adding one more accordian form in the same page. After submitting the second form another set of json data is submitted. And my response after submitting three forms looks like the below json array.

JSON response below:

[{
  "Key": "S1552115431598",
  "Record": {
    "AdditionalDetails": [{
        "No": "S1552115431598",
        "Circle": "CHE",
        "Src": "UC1"
      },
      {
        "No": "S1552115431598",
        "Circle": "JAR",
        "Src": "UC2"
      },
      {
        "No": "S1552115431598",
        "Circle": "MUM",
        "Src": "UC3"
      }
    ],
    "Category": "Education",
    "Date": "09-03-2019",
    "Desc": "nbhbnbnb",
    "Time": "12:11 PM",
    "No": "S1552115431598"
  }
}]

Now, I want to populate the json array datas in to the repective accordian forms.

html

<mat-step [stepControl]="tapForm">
  <ng-template matStepLabel><span (click)="onNextLoadTAP(res[0]?.Record?.No,res[0]?.Record?.Operator)">FIRST</span>
  </ng-template>
  <button class="acc-btn btn mb-3" *ngIf="FormSubmitted" (click)="onCreateAccr()">New Form <mat-icon>
      playlist_add</mat-icon> </button>
  <mat-accordion>
    <mat-expansion-panel *ngFor="let tform of historyT; let i = index">
      <mat-expansion-panel-header>
        <mat-panel-title>
          Additional Information {{ i+1 }}
        </mat-panel-title>
        <mat-panel-description>
          Sample Description {{ i+1 }}
        </mat-panel-description>
      </mat-expansion-panel-header>
      <mat-divider></mat-divider>
      <form>
        <div class="row mt-3">
          <mat-form-field class="col-sm-12">
            <input matInput placeholder="Circle">
          </mat-form-field>
          </mat-form-field>
          <mat-form-field class="col-sm-12">
            <input matInput placeholder="source">UCC Portal
          </mat-form-field>
        </div>
      </form>
    </mat-expansion-panel>
  </mat-accordion>

My ts file: onClick of add button this function will be called.

historyT: any = [];
onCreateAccr() {
this.APIGet();   // My json response will be coming from this function
this.historyT.push(this.historyT.length + 1);
}

Normally we used to setvalues like this,

this.tapForm.controls['circle'].setValue(this.res[i].Record.Category);

But, Im struggling to setvalues for this multiple accordian forms, Can anybody Please help me how to do this?

Answer 1

You have to push AdditionalDetails to a list because when adding or modifying any object you must change the list.