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

我想得太过分了：由于我拥有唯一的FormControl，因此我需要的只是用于处理它的页面的一个FormGroup。

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

1 个答案: