0

I'm iterating through an array to check if some selected values exist in there then a checkbox should be checked. When I log the results, its able to produce the correct response ('hello') in the console meaning the code works perfectly but I don't know why its not able to check the checkbox

this.selected = [ 1, 8032, 8042, 8047, 8021, 7986];

this.srvresp = [{id:11, name:'AA'}, {id:8032, name:'BB'}, {id:10, name:'CC'}, {id:409, name:'DD'}, {id:300, name:'EE'} ,{id:302, name:'FF'}, {id:478, name: 'GG'}, {id:8042, name: 'HH'}, {id:8047, name:'II'}, {id:8021, name:'JJ'}, {id:7986, name:'KK'}];

for (const  s of this.srvresp) {
  for (const  selected of this.selected) {
    if (s.id == selected) {
      console.log('hello')
      s.checked = true;
    }
  }
}

HTML

<div *ngFor="let item of srvresp; index as ind">
 <input [(ngModel)]="item.checked" formControlName="selectedStudents" [value]="item.id" type="checkbox" class="custom-control-input" id="-item-{{ind}}">

</div>
neiza
  • 31
  • 7
  • 1
    I tried your code and it works fine when I remove the `formControlName` directive. According to [this SO answer](https://stackoverflow.com/a/55739635/11755228), mixing Template-Driven Forms and Reactive Forms is not a good idea. – David Fontes Jul 30 '20 at 10:48
  • Add you whole component and html code, – critrange Jul 30 '20 at 10:58

1 Answers1

0

You should not mix Template-Driven and Reactive forms to avoid conflicting behaviour - you should replace excess formControlName attribute usage.

Ilia Komarov
  • 623
  • 3
  • 6