在html中访问FormBuilder数据-解网

问：

我初始化了一个FormBuilder，然后把数据放进去，如下代码：

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] }))
    }
  }

我有这个方法来访问工作

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

formBuilder 的值是这样的：

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

我尝试在html中执行以下代码，但没有得到任何东西

                     <table>
                      <form [formGroup]="formBuilder">
                        <thead>
                          <tr class="fw-bolder fs-6 text-gray-800">
                            <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>

如何使用formBuilder制作表格？

角

<form [formGroup]="formBuilder">
  <table>
    <thead>
      <tr class="fw-bolder fs-6 text-gray-800">
        <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>

然后，您需要为操作键创建控件数组，而不是直接分配数组值

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))) }))
}

工作实例

在html中访问FormBuilder数据

Accessing FormBuilder data in the html

评论

评论