如何将动态生成的表单组添加到Angular中动态生成的表行？

Question

我有一个 Angular 应用程序，它有一个动态生成的调查表，其中包含 X 个用户必须回答问题的主题。使这变得棘手的是行对应于问题，列对应于答案（这是我无法更改的任务），因此我无法将生成的行包装在完全处理的表单组中每个主题的答案。 HTML 看起来像：

  <tr *ngFor="let question of questions; index as i">
      <td class="question-column">{{ question }}</td>
      <td *ngFor="let name of networkNames">
        <app-value-dropdown
          [name]="name"
          [parent]="answers"
          [question]="question"
        ></app-value-dropdown>
      </td>
    </tr>

我得到的最远的方法是动态创建一个 FormGroups 的 FormArray，它对表格的结构进行建模，只要包含适当对应的表单控件，如下所示：

 buildForm() {
    const questions = Object.keys(this.questionFields);
    questions.forEach(question => {
      const group = new FormGroup({});
      this.networkNames.forEach(name => {
        group.addControl(
          `${name}__${question}`,
          new FormControl(0, Validators.required)
        );
      });
      this.answers.push(group);
    });
  }

我遇到的问题是在生成时将相应的 FormGroup 附加到每一行；我尝试利用表格行上的索引并将<tr> 的内部包装在一个表单中，其中 [formGroup] 在该迭代中设置为当前的 FormGroup，但这会导致行不呈现。如何调整此代码/方法以根据需要设置表单？

Answer 1

我想多了：因为我有独特的 FormControls，所以我只需要一个 FormGroup 来处理它的页面。