CODEWITHSUNDEEP
javascriptcheckboxtypescriptangular
Kayo Lima
Kayo Lima

Reputation: 740

Angular 2 retrieve selected checkboxes

I have this checkbox (a customer may have many accessories):

customer.component.html:

<div class="checkbox" *ngFor="let accessory of accessories">
 <label>
  <input type="checkbox" [(ngModel)]="accessory.selected" (ngModelChange)="onCheckboxChange(accessory)"> {{ accessory.name }}
 </label>
</div>

customer.component.ts:

onCheckboxChange(accessory: any) {
    if (accessory.selected == true) {
        this.selectedAccessories.push(accessory);
    } else {
        let i = this.selectedAccessories.indexOf(accessory);
        if (i != -1) {
            this.selectedAccessories.splice(i, 1);
        }
    }
}

I have a method that I can save the selected checkboxes in one array for example: 

customer: Customer;
accessories: any[];
selectedAccessories: any[];  

ngOnInit() {
 this.accessoryService.get().subscribe(
   accessories => this.accessories = accessories
 )
 if (this.routeParams.get('id')) {
   let id = this.routeParams.get('id');
   this.getCustomer(id);
 }
} 

getCustomer(id: number) {
  this.customerService.getCustomer(id).subscribe(
    data => { 
     this.selectedAccessories = data.customer.accessories
     this.customer = data.customer
    }
  )
}

It's working fine, when I check the object is saved in the database. But I don't know how can I populate that selected accessories back to the checkboxes. I tried to compare the arrays with indexOf() and map() but without success

Obs: the Object accessory have only 2 attributes: id and name.

Any help would be appreciated

Upvotes: 0

Views: 1509

Answers (1)

Sjoerd
Sjoerd

Reputation: 1305

You are binding your checkboxes to the selected attribute of object accessory with [(ngModel)]="accessory.selected". That means that whenever you check/uncheck a checkbox the accessory.selected value is updated. It also works the other way around: if the accessory.selected value is set, the checkbox is updated. You can see that idea demonstrated in the following Plunker: Plunker - checkboxes

We first create an array of accessories objects: 

  private accessories = [
    {name: 'A', selected: false}, 
    {name: 'B', selected: true}
  ];

Note that all these accessories have a name and a selected value. The value for accessory B is set to true. You can see the result when first loading the page: the checkbox for accessory is A is unchecked (because of selected: false), while the checkbox for accessory B is checked (because of selected: true). If you check/uncheck a checkbox, you can see the result of the selected property printed in the console.

What this means is that in your code you will need to set the selected property of the objects in the accessories array to the appropriate value.

You could also go a bit further with this: you are now listening to the onCheckboxChange event just to keep track of an array of selected accessories. You could leave this out altogether and only construct that array when it is requested by iterating over all accessories and picking those accessories out that have selected: true set.

Upvotes: 1

Related Questions