Using *ngFor and $event based checkbox

Question

I'm trying to generate a lists of checkboxes using ngfor. Everything works fine but if I check the 1st checkbox on the bottom card row it seems to think I checked the 1st box of the 1st card row.

Here's a small gif that demonstrates the issue. http://www.giphy.com/gifs/dQpr1jkRci0DaZoLMl

<div *ngFor="let task of taskdata" class="card" >

    <div *ngIf="task.task1" class="custom-control custom-checkbox">
          <input type="checkbox" class="custom-control-input" id="customCheck1" 
                (change)="getdataonID($event.target.checked)" [checked]="task.isDone1">
          <label class="custom-control-label" for="customCheck1">{{task.task1}}</label>
    </div>

JB Nizet · Accepted Answer · 2018-06-17 09:19:01Z

3

All your checkboxes have the same ID. And clicking on any of the labels is supposed to select the checkbox identified by customCheck1. But there are many of them. So that can't work.

There might be other problems, but you didn't post all the relevant code.

answered Jun 17, 2018 at 9:19

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

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

3 Comments

Randika Peiris Over a year ago

This was it. Having check box id was the problem. After I erased that it fixed the issue thanks! Sorry about not posting the whole code I will do it next time :)

JB Nizet Over a year ago

@RandikaPeiris you shouldn't remove the ID. That will make it impossible to click the label to check or uncheck the checkbox. Instead, you should use unique IDs.

Randika Peiris Over a year ago

Allright, I haven't heard of that but will do some research. Anyway although I removed the ID, I'm able to check and uncheck the box and my functions work as well but as you said clicking the label is not possible anymore

Sajeetharan · Accepted Answer · 2018-06-17 09:18:54Z

2

use the [(ngModel)] with the checked attribute

 <input type="checkbox" class="custom-control-input" id="customCheck1" 
 (change)="getdataonID($event.target.checked)"  [(ngModel)]="task.isDone1">

answered Jun 17, 2018 at 9:18

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

2 Comments

Randika Peiris Over a year ago

I'm using [checked] to get the previous state of the checkbox as stored in the DB. If I use ngmodel will will it affect that?

Sajeetharan Over a year ago

Nope it wont affect

Alok G. · Accepted Answer · 2018-06-17 12:57:02Z

0

Check this exmaple, I hope it will work for you. Instead of the event I am calling the method and passing element data as param and performing calculations in the component.

answered Jun 17, 2018 at 12:57

Alok G.

1,5684 gold badges16 silver badges26 bronze badges

Collectives™ on Stack Overflow

Using *ngFor and $event based checkbox

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related