how to populate nested form array in table in angular?

Question

I have an array of objects and inside each object i have array of objects. I wanted to populate those inside array of objects(checklist and weightage) into table.What i get is , I could populate the array of object and inside array is not displaying with each rowspan. Attached my output and expected output image 1: https://i.sstatic.net/DqYtD.png [2]: https://i.sstatic.net/vqVjs.png

HTML code;
     <table class="table table-xs table-sm table-hover">
    <thead class="table-primary">
    <tr>
    <th width="20%">Activity Name</th>
    <th width="15%">Activity Description</th>
    <th width="15%">Overall Percentage</th>
    <th width="10%">CheckList</th>
    <th width="10%">Weightage</th>
    </tr>
    </thead>
    <tbody>
    <ng-container formArrayName="activity_mappings" *ngFor="let activity of activityMappings['controls']; let i = index;">
     <ng-container [formGroupName]="i">
     <tr>
       <td>
     <input type="text" class="form-control form-control-sm" placeholder="Activity Name"
     formControlName="activity_name"/>
       </td>
     <td>
    <input type="text" class="form-control form-control-sm" placeholder="Description"
     formControlName="description"/>
      </td>
    <td>
    <input type="text" class="form-control form-control-sm" placeholder="Overall Percentage"
     formControlName="overall_percentage"/>
     </td>
      <ng-container formArrayName="check_lists" *ngFor="let ch of activity.check_lists;let checkListindex = index;">
    <ng-container [formGroupName]="checkListindex">
    <ng-container *ngIf="checkListindex > 0">
     <td>
     <input type="text" class="form-control form-control-sm" placeholder="CheckList" formControlName="check_list_title"/>
    </td>
    <td>
     <input type="text"  formControlName="weightage" class="form-control form-control-sm" placeholder="Weightage"/>
    </td>
    </ng-container>
     </ng-container>
    </ng-container>
     </tr>
    </ng-container>
    </ng-container>
    <tr *ngIf="activityMappings.length == 0">
      <td class="text-center" colspan="4">No Activities Found</td>
       </tr>
           </tbody>
     </table>

data population to table

sample object:

activity_mappings ": [ { "
activity_name ": "
testing ", "
description ": "
som text ", "
overall_percentage ": 80, "
check_lists ":[ { "
check_list_title ": "
Done ", "
weightage ": "
20 " } ] }, { "
activity_name ": "
playing ", "
description ": "
some text ", "
overall_percentage ": 30, "
check_lists ":[ { "
check_list_title ": "
Not Done ", "
weightage ": "
30 " } ] } ]

Answer 1

your checklist is not a FormArray, so first change the line when create the formArray

 activityAuditMappings(obj?) {
    return this.fb.group({
      ...
      check_lists: this.fb.array(this.loopchecklist(obj)) //<--use this.fb.array
    });

As always you use a FormArray we need a getter of the FormArray. When we use a FormArray inside a FormArray we can not use a getter else a simple function that need an index

  getCheckListMappings(index:number): FormArray  {
    return this.activityMappings.at(index).get('check_lists') as FormArray
  }

That you can use like

          <ng-container formArrayName="check_lists"
            *ngFor="let ch of getCheckListMappings(i).controls;let checkListindex = index;">
            <ng-container [formGroupName]="checkListindex">
              <ng-container *ngIf="checkListindex > 0">
                <td>
                  <input type="text" class="form-control form-control-sm" placeholder="CheckList"
          readonly="true"  formControlName="check_list_title"/>
                </td>
                <td>
                  <input type="text"  formControlName="weightage" class="form-control form-control-sm" placeholder="Weightage" readonly="true" />
                </td>
              </ng-container>
            </ng-container>
          </ng-container>

Really I imagine you want to create a table inside a td to allow change the values of checkList

  <tbody>
    <ng-container formArrayName="activity_mappings">
      <tr style="vertical-align:top" *ngFor="let activity of activityMappings['controls']; let i = index;" [formGroupName]="i">
        <td>
          <input type="text" class="form-control form-control-sm" placeholder="Activity Name"
            formControlName="activity_name" readonly="true" />
        </td>
        <td>
          <input type="text" class="form-control form-control-sm" placeholder="Description"
            formControlName="description" readonly="true" />
        </td>
        <td>
          <input type="text" class="form-control form-control-sm" placeholder="Overall Percentage"
            formControlName="overall_percentage" readonly="true" />
        </td>
        <td colspan="2">
          <table style="border-collapse: collapse;border:0" formArrayName="check_lists">
            <tr *ngFor="let ch of getCheckListMappings(i).controls;let checkListindex = index;"
              [formGroupName]="checkListindex">
              <td>
                <input type="text" class="form-control form-control-sm" placeholder="CheckList"
          readonly="true"  formControlName="check_list_title"/>
              </td>
              <td>
                <input type="text"  formControlName="weightage" class="form-control form-control-sm" placeholder="Weightage" readonly="true" />
              </td>
          </table>
          <ng-container *ngIf="getCheckListMappings(i).controls.length == 0">
            No Activities Found
          </ng-container>
        </td>
      </tr>
    </ng-container>
  </tbody>

You can see your forked stackblitz