mercredi 22 avril 2020

Angular FormControl CheckBox selection marks every sibling

I have searched about one day for an answer to my problem but I was unable to find anything similar, finally I made up my mind to ask you for a help.

I am having trouble with Angular FromControl, that are being created dynamicly based od passed data.

My list displays Groups and Subgroups of specific Data, everything works almost perfectly fine, but whenever I check subgroup, every of its sibling is being marked and i am unable to come up whats wrong.

Thats my 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"> </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"> </label>
        </div>
      </div>
    </div>

And this is how I am mapping specific FormControl :

  getChartControl(chapterIndex: string, chartIndex: number) {
    return this.data.controls[chapterIndex].get('charts').controls[chartIndex];
  }

As you can see on below image when I check subgroup, there is 11 selected and I have no idea how thats possible.

More intresting thing is that this doesnt apply to groups... So if I would check First group there would be only one selected...

enter image description here




Aucun commentaire:

Enregistrer un commentaire