Angular 2 set and bind checkboxes with a ngFor

Question

I have an array like this:

 objectArray = [
        {"name": "Car"},
        {"name": "Bike"},
        {"name": "Boat"},
        {"name": "Plane"}
    ];

And the template like this:

<li *ngFor="#obj of objectArray">
   <a href="#" class="small" data-value="option1" tabIndex="-1">
      <input type="checkbox" (change)="expression && expression.value = $event.target.checked ? true : undefind" [ngModel]="expression?.value">
      <label for="">{{ obj.name }}</label>
   </a>
</li>

But this is set true when 1 checkbox is checked. How do i set this separately ?

Erik Philips · Accepted Answer · 2019-10-28 07:52:05Z

I had some trouble figuring this out with the latest release of Angular 2. Here's what I came up with to do two-way binding to a list of objects that contain a role name and boolean for when the role is checked.

<form [formGroup]="userInfoForm" (ngSubmit)="onSubmit(userInfoForm)">

...

 <input type="hidden" name="roles" formControlName="roles" [(ngModel)]="roleSelections">
 <div *ngFor="let role of roleSelections">
     <input type="checkbox" 
            [value]="role.isChecked" 
            [checked]="role.isChecked" 
            (change)="$event.target.checked ? role.isChecked = true : role.isChecked = false">
       {{role.name}}
 </div>

RoleSelection is just a simple class with two fields:

export class RoleSelection {
constructor(
    public name: string,
    public isChecked: boolean)
    { }
}

And in the component I had to declare a property called roles when creating a FormGroup, and then bind this to the hidden field in the HTML above.

    this.userInfoForm = new FormGroup({
        emailAddress: new FormControl(this.userInfo.emailAddress, Validators.required),
        firstName: new FormControl(this.userInfo.firstName, Validators.required),
        middleName: new FormControl(this.userInfo.middleName),
        lastName: new FormControl(this.userInfo.lastName, Validators.required),
        isAdmin: new FormControl(this.userInfo.isAdmin),
        isArchived: new FormControl(this.userInfo.isArchived),
        roles: new FormControl(this.roleSelections)
    });

Then upon submission of the form, the ngSubmit method just has to pull out what it needs:

 private onSubmit(obj: any) {
    if (obj.valid) {
        let account: IUserAccount = {};
        account.id = this.userAccountId;
        account.firstName = obj.controls.firstName.value;
        ...
        ...
        // get list of roles checked via obj.controls.roles.value[i].isChecked etc
        ...
        ...
        // do submission
    }
 }

Your (change) could be simplified to role.isChecked = $event.target.checked.

Günter Zöchbauer · Accepted Answer · 2018-02-27 18:27:11Z

7

I guess this is what you want:

<li *ngFor="let obj of objectArray">
   <a href="#" class="small" data-value="option1" tabIndex="-1">
<input type="checkbox"  
    (change)="expression && expression[obj.name]=$event.target.checked ? true : undefined"
    [ngModel]="expression && expression[obj.name]">
   </a>
</li>

update Using (ngModelChange) is usually better than (change) especially if [ngModel] is used

<input type="checkbox"  
    (ngModelChange)="expression && expression[obj.name]= $event ? true : undefined"
    [ngModel]="expression && expression[obj.name]">

edited Feb 27, 2018 at 18:27

answered Apr 11, 2016 at 12:50

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

2 Comments

Tori Marrama Over a year ago

This works well for 2 way binding a checkbox list to an array of values with angular 2+ Thanks!!

Günter Zöchbauer Over a year ago

Glad to hear. It's an old answer. It's better to use (ngModelChange)="expression && expression[obj.name]=$event ? true : null"

Collectives™ on Stack Overflow

Angular 2 set and bind checkboxes with a ngFor

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related