How to submit the formarray in angular in the given format?

Question

While submitting the form in angular, the data should pass like given below. Inside role menu only 1st index is passing. I want all the index data to be passed on submit.

{
  "roleMenu":[{
    "menu":{
      "menuId": 1  
    },
    "readAccess": true,
    "writeAccess":true
  },
  {
    "menu":{
      "menuId": 2
    },
    "readAccess": true,
    "writeAccess":true
  }]

}

How can I achieve this?

I have a html code:

<div formArrayName="roleMenu">
            <div *ngFor="let row of postForm.get('roleMenu')['controls']; let i=index" [formGroupName]="i">
                <table matSort class="table --table-responsive table-bordered table-border-new">
                    <thead class="t-head">
                        <tr>
                            <th class="text-center col-form-label">Menu Name</th>
                            <th class="text-center col-form-label">Read Access</th>
                            <th class="text-center col-form-label">Write Access</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let row of selectedMenuData; let i=index;">
                            <td class="text-center">{{ selectedMenuData[i]?.menuname }}</td>
                            <td class="text-center">
                                <mat-checkbox formControlName="readAccess"></mat-checkbox>
                            </td>
                            <td class="text-center">
                                <mat-checkbox formControlName="writeAccess"></mat-checkbox>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

Typescript code: I have the on init function and submit function

ngOnInit(): void {
this.postForm = this.formBuilder.group({
      selectedMenuId: [[]],
      roleMenu: this.formBuilder.array([
        this.formBuilder.group({
          menu: this.formBuilder.group({
            menuId: [null]
          }),
          readAccess: [false],
          writeAccess: [false]
        })
      ])
    });
}

onSubmit(){
console.log(this.postForm.value);
}

Any help would be appreciated, Thank you!

Answer 1

roleMenu: this.formBuilder.array([
    this.formBuilder.group({
      menu: this.formBuilder.group({
        menuId: [null]
      }),
      readAccess: [false],
      writeAccess: [false]
    })
  ])

it is becouse in this part of code where you preparing formArray, you added only one formgroup