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