How to uncheck a checkbox in angular2

Question

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

Answer 1

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>

Answer 2

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']">