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
– Vel

2017-04-01 10:31:34 +00:00
Commented Apr 1, 2017 at 10:31 — Vel
– Vel, Commented Apr 1, 2017 at 10:31
its not for multiple checkboxes my bad vl update it

Rahul Singh
– Rahul Singh

2017-04-01 10:32:16 +00:00
Commented Apr 1, 2017 at 10:32 — Rahul Singh
– Rahul Singh, Commented Apr 1, 2017 at 10:32

Vivek Doshi · Accepted Answer · 2017-04-01 10:51:07Z

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 1, 2017 at 10:51

answered Apr 1, 2017 at 10:46

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Vel Over a year ago

,how to change If I want the all checkboxes selected by default?

Vivek Doshi Over a year ago

add [checked]='true' inside <input type='chekbox'>

Vel Over a year ago

could you please check this stackoverflow.com/questions/43580675/…?

Vivek Doshi Over a year ago

@vel, have answered your question , please have a look.

Aravind · Accepted Answer · 2017-04-01 10:34:51Z

0

<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

answered Apr 1, 2017 at 10:34

Aravind

41.7k16 gold badges97 silver badges111 bronze badges

1 Comment

Aravind Over a year ago

are you available in teamviewer

Mr. Madamin · Accepted Answer · 2017-04-01 10:52:22Z

0

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>

answered Apr 1, 2017 at 10:52

Mr. Madamin

31 bronze badge

Collectives™ on Stack Overflow

How to select multiple checkbox in for loop in angular2?

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related