StackBlitz: http://stackblitz.com/edit/angular-jul7bv
У меня проблемы с Angular FromControl, которые создаются динамически на основе переданных данных.
В моем списке отображаются группы и подгруппы с указанными c данными, все работает почти идеально, но всякий раз, когда я проверяю подгруппу, отмечается каждый из ее братьев и сестер, и я не могу понять, что не так.
Это мой html:
<div *ngFor="let chapter of checkboxControlLabels; let i = index;">
<div class="input-checkbox-subgroup-list__checkbox">
<div class="input-checkbox">
<input type="checkbox" [attr.id]="chapter.id + '_checkboxControl_' + i"
[formControl]="getChapterControl(i)" />
<label [attr.for]="chapter.id + '_checkboxControl_'+ i">{{ chapter.title }} </label>
</div>
</div>
<div class="input-checkbox-subgroup-list__checkbox" *ngFor="let chart of chapter.charts; let x = index;">
<div class="input-checkbox chart">
<input type="checkbox" [attr.id]="chart.title + '_checkboxControl_' + x" [formControl]="getChartControl(i, x)" />
<label [attr.for]="chart.title + '_checkboxControl_' + x">{{ chart.heading }} </label>
</div>
</div>
</div>
И вот как я отображаю специфику c FormControl:
getChartControl(chapterIndex: string, chartIndex: number) {
return this.data.controls[chapterIndex].get('charts').controls[chartIndex];
}
Как вы можете видеть на изображении ниже, когда я проверяю подгруппу, там выбрано 11 понятия не имею, как это возможно.
Более интересно то, что это не относится к группам ... Так что, если бы я проверил первую группу, то был бы выбран только один ...
Это FormGroupModel что я использую позже:
this.chapterChartsData.forEach(chapters => {
dataForm.push(new FormGroup({
chapter: new FormControl(false),
charts: new FormArray(Array(chapters.charts.length).fill(new FormControl(false)))
}))
});