dimanche 18 juin 2017

How to unchecked a selected checkbox, Angular 2

I was trying to unchecked a selected checkbox. I have a list of items with checkbox, so when I clicked the checkbox the item will be push to array and will display to another div. then that div have a remove button that when i remove that specific item. the item will remove and also the item that has been checked will be unchecked. I hope you understand what im saying. im bad at english. here's my code.

the first div
          <tr *ngFor = "let item of rows">
              <td style ="text-align: center"><md-checkbox 
                 (change)="onChange(item, $event.checked)" [value] = "item" name = "checklist"></md-checkbox></td>
              <td> </td>
              <td> </td>
              <td><button md-icon-button (click)="openModal(item)"><i class="material-icons">find_in_page</i></button></td>
          </tr>

and then this is the (change) event that will push and remove item on array

onChange(gridData: Array<any>, isChecked: boolean) {

    if(isChecked) {
      //push item if true
      this.FormArray.push(gridData);

    } else {
      //remove item if false
      let index = this.FormArray.indexOf(gridData);
      console.log(index);
      this.FormArray.splice(index, 1);
    }

then display all the FormArray data on another div

<tr *ngFor = "let item of FormArray">
         <td> </td>
         <td> </td>
         <td><button md-icon-button (click) = "removeItem(item)"><i class="material-icons">delete</i></button></td>
         </tr>

it worked well if I click the remove button it will remove to FormArray

removeItem(item): void {

let pointer = this.FormArray.indexOf(item);
if (pointer > -1) {
  this.FormArray.splice(pointer, 1);
}

the problem is that even if I remove the item from that FormArray the checkbox that has been selected earlier is still selected / checked. how can I forcefully unchecked that checkbox. please help me out thanks. PS im newbie.




Aucun commentaire:

Enregistrer un commentaire