I initialized a FormBuilder and after I put data in it, like the code below:

generateTable(dataJobs: any): void {
    this.formBuilder = this.fb.group({
      jobs: this.fb.array([
        this.fb.group({
          name: this.fb.control(null),
          operations: this.fb.array([])
        })
      ])
    })
    this.jobs.removeAt(0)
    for (let i = 0; i < dataJobs.length; i  ) {
      this.jobs.push(this.fb.group({ name: dataJobs[i].name, operations: [dataJobs[i].operations] }))
    }
  }

I have this method to access jobs

  get jobs() {
    return this.formBuilder.get('jobs') as FormArray;
  }

the value of formBuilder is this:

{
  "jobs": [
    {
      "name": "job0",
      "operations": [
        "(M0,3)",
        "(M1,2)"
      ]
    },
    {
      "name": "job1",
      "operations": [
        "(M1,3)",
        "(M1,2)"
      ]
    }
  ]
}

I tried to do the following code in html but I didn't get anything

                     <table>
                      <form [formGroup]="formBuilder">
                        <thead>
                          <tr >
                            <th>#</th>
                            <th>2</th>
                            <th>2</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr formArrayName="jobs"
                            *ngFor="let jobs of formBuilder.get('jobs')['controls']; let i=index">
                            <td formArrayName="operations"
                              *ngFor="let operations of formBuilder.get('jobs')['controls'][i].get('operations')['controls']; let ind =index">
                              {{operations}} {{ind}}
                            </td>
                            <td>Tiger Nixon</td>
                            <td>Tiger Nixon</td>
                          </tr>
                        </tbody>
                      </form>
                    </table>

How can i make the table with formBuilder?

CodePudding user response：

Adding Form inside table is not allowed, it's consider as invalid html. Move your form outside table

<form [formGroup]="formBuilder">
  <table>
    <thead>
      <tr >
        <th>#</th>
        <th>2</th>
        <th>2</th>
      </tr>
    </thead>
    <tbody>
      <tr
        formArrayName="jobs"
        *ngFor="let jobs of formBuilder.get('jobs')['controls']; let i = index"
      >
        <ng-container [formGroupName]="i">
          <td
            formArrayName="operations"
            *ngFor="
              let operation of formBuilder
                .get('jobs')
                ['controls'][i].get('operations')['controls'];
              let ind = index
            "
          >
            {{ operation.value }} {{ ind }}
          </td>
        </ng-container>
        <td>Tiger Nixon</td>
        <td>Tiger Nixon</td>
      </tr>
    </tbody>
  </table>
</form>

Then instead of assigning array values directly, You need to create array of control for operations key

for (let i = 0; i < dataJobs.length; i  ) {
       this.jobs.push(this.fb.group({ name: dataJobs[i].name, operations: 
       this.fb.array( dataJobs[i].operations.map(operation=>this.fb.control(operation))) }))
}

Working Example