How to select multiple checkbox in for loop in angular2?

Question

I have tried angular 2 to list categories list with checkbox and user can select any category. I tried with below code. The issue is if I selected any one checkbox all the checkbox are selected and I cannot get the form values on save function. Food.category is dynamic. How can I fix this?

<form #f="ngForm" novalidate>
    <div class="checkbox checkbox-primary" *ngFor="let categoryname of Food.category;">
        <label for="categoryname">          
            <input type = "checkbox" name="categoryname[]" [(ngModel)]="Catcheckbox" (click)="onClick(categoryname)" value="{{categoryname}}"/>
            {{categoryname}}
        </label>
    </div>  
    <button type="submit" (click)="save(f.value, f.valid)" class="btn btn-default">Submit</button>
</form> 

export class ExploreListComponent implements OnInit {
    Catcheckbox:true ;

    onClick(categoryname) {
        alert(categoryname + ' was clicked!');
    }

    save(isValid: boolean, f: User) {
        if (!isValid) return;
        console.log(f);
    }
}

@RahulSingh, where is example for checkbox?. – Vel Apr 01 '17 at 10:31 — Vel, Apr 01 '17 at 10:31
its not for multiple checkboxes my bad vl update it – Rahul Singh Apr 01 '17 at 10:32 — Rahul Singh, Apr 01 '17 at 10:32

Vivek Doshi · Accepted Answer · 2017-04-01T10:51:07.907

1

Change your code as below , and you will get all selected checkboxes values;

Template :

<form #f="ngForm" novalidate>
    <div class="checkbox checkbox-primary" *ngFor="let categoryname of Food.category;let i=index;">
        <label for="categoryname">          
            <input type="checkbox" name="categoryname[{{i}}]"  [value]="categoryname" 
(change)="categories[$event.target.getAttribute('value')]=$event.target.checked"/>
        {{categoryname}}
        </label>
    </div>  
        <button type="submit" (click)="save(f.valid)" class="btn btn-default">Submit</button>
</form>

Component :

export class ExploreListComponent implements OnInit {

        categories = {};

        save(isValid: boolean) {
            if (!isValid) return;
            console.log(this.categories);
        }
    }

edited Apr 01 '17 at 10:51

answered Apr 01 '17 at 10:46

Vivek Doshi

56,649
12
110
122

,how to change If I want the all checkboxes selected by default? – Vel Apr 01 '17 at 13:09
add [checked]='true' inside – Vivek Doshi Apr 01 '17 at 13:11
could you please check this http://stackoverflow.com/questions/43580675/how-to-display-comman-header-and-footer-by-defualt-in-angular-2? – Vel Apr 24 '17 at 06:00
@vel, have answered your question , please have a look. – Vivek Doshi Apr 24 '17 at 07:09

score 0 · Answer 2 · answered Apr 01 '17 at 10:34

<div class="checkbox checkbox-primary" *ngFor="let categoryname of Food.category;">
            <label for="categoryname">          
             <input type = "checkbox" *ngIf="selectAll" [checked]="selectedAll" name="categoryname[]" [(ngModel)]="Catcheckbox" (click)="onClick(categoryname)" value="{{categoryname}}"/>


               <input type = "checkbox" *ngIf="selectAll" [checked]="!selectedAll" name="categoryname[]" [(ngModel)]="Catcheckbox" (click)="onClick(categoryname)" value="{{categoryname}}"/>
            {{categoryname}}
            </label>
        </div>  
         <button type="submit" (click)="save(f.value, f.valid)" class="btn btn-default">Submit</button>
    </form>

on click of the select all button

this.selectAll=true

So all the elements are selected and you have the entire array passed to *ngFor

are you available in teamviewer – Aravind Apr 01 '17 at 10:45 — Aravind, Apr 01 '17 at 10:45

score 0 · Answer 3 · answered Apr 01 '17 at 10:52

I would recommend using ReactiveFormsModule. In this case you are assigning the array to all input name attributes. Try to assign only current index like name="{{i}}" which is set in *ngFor directive

<form #f="ngForm" novalidate>
    <div class="checkbox checkbox-primary" *ngFor="let categoryname of Food.category; let i = index">
        <label for="categoryname">          
         <input type = "checkbox" name="{{i}}" [(ngModel)]="Catcheckbox" (click)="onClick(categoryname)" value="{{categoryname}}"/>
        {{categoryname}}
        </label>
    </div>  
     <button type="submit" (click)="save(f.value, f.valid)" class="btn btn-default">Submit</button>
</form>

How to select multiple checkbox in for loop in angular2?

3 Answers3