How to uncheck a checkbox in angular2

I have code in the HTML file that looks like this

 <tr *ngFor="#tradeSource of tradeSources">
     <td>
         <label>
         <input type="checkbox" ngControl="tradeSource"    [(ngModel)]="tradeSource['checked']"/>
         </label>
     </td>           
     <td>{{tradeSource.blah}}</td>
     <td>{{tradeSource.blah}}</td>
     <td>{{tradeSource.blah}}</td>
</tr>

A user can check the check box then click a “Process” button that will run some code, after this code has run I would like to uncheck this checkbox. Ive tried code like

this.tradeSources[i]['checked'] = false

But this isnt working

2
Leave a Reply

avatar
2 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

The code you should rather try is: this.tradeSources[i]['checked'] = false Edit I think that your problem is because you have the same name for each control of checkboxes: <input type="checkbox" ngControl="tradeSource" [(ngModel)]="tradeSource.checked"/> If you remove the ngControl attribute, it works: <input type="checkbox" [(ngModel)]="tradeSource.checked"/> See this plunkr: https://plnkr.co/edit/FdPHpOTSySkg2gLWjo7a?p=preview. If you really want an ngControl you could define it this way: <tr *ngFor="#tradeSource of tradeSources;#i=index"> <td> <label> <input type="checkbox" [ngControl]="'trade'+i" [(ngModel)]="tradeSource.checked"/> </label> </td> (...) </tr>

Jason
Guest

I believe the reason this is not working, and which should probably also throw an error in your console, is the usage of unbinded ngControl. It should be enough to just do:

<input type="checkbox" [(ngModel)]="tradeSource['checked']">