У меня есть приложение 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>
Дальнейшее, что я получил, - это динамическое создание FormArray из FormGroups, который моделирует структуру таблицы, поскольку она содержит элементы управления формой, которые соответствуют соответствующим образом, например:
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 на этой итерации, но это приводит к тому, что строки не отображаются. Как я могу настроить этот код / подход, чтобы форма была настроена по мере необходимости?