Repeating checkbox input with nested ngFor

Question

I'm trying to repeat a nested object and I have a checkbox with a value of true or false.

Here's my code:

<accordion-group
    *ngFor='let brand of products'>
    <div *ngFor='let product of brand.products'>
        <div>
           <input type="checkbox" id="{{product.name}}" ngControl="{{product}}" ([ngModel])="product.checked">
             <label
                attr.for="{{product.name}}"
                id="{{product.description}}"
                class="{{product.description}}"
                (click)="onCheck(model)">
             </label>
          </div>
        </p>
      </div>
    </accordion-group>

Plunker: http://plnkr.co/edit/IItxHiXkpocUjLG6NhMy?p=preview -- see that the checkbox doesn't check when the quantity value is updated. I can't get ngModel to work correctly.

Put a name attribute to the checkboxes. If they are supposed to belong to the same group they should have same names. Also you can make this question more clear if you add a fiddle with this code so we can better understand the problem, seeing the code running and failing. — gdyrrahitis
– gdyrrahitis, Commented Aug 29, 2016 at 22:39

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

ngControl should be fromControlName according to angular2 RC.5
([ngModel]) should be [(ngModel)] or used as different one like [ngModel] and (ngModel) .
better to use property Binding using [ ] while binding id ,name etc dynamicaly as in your case use

use [id]="product?.name" instead of id="{{product.name}}"

use [attr.for]="product?.name" instead of attr.for="{{product.name}}"

seems Rest is fine everything, if still having same issue please reproduce your problem on plunker and post it.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 30, 2016 at 5:49

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

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

2 Comments

Brooke Clonts Over a year ago

See plunker linked to in edited question. I need the checkbox to check when the quantity updates but it doesn't work. The ngModel isn't binding the way it should

Brooke Clonts Over a year ago

you were right. I got my plunker to work. Now I just need to figure out why it doesn't work in my app. Thanks!

Günter Zöchbauer · Accepted Answer · 2016-08-30 04:51:01Z

1

This is invalid

([ngModel])

and should be

[(ngModel)]

It's called "banana in a box", not "box in a banana" ;-)

answered Aug 30, 2016 at 4:51

Günter Zöchbauer

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

2 Comments

Günter Zöchbauer Over a year ago

But you see it's helpful :D

Pardeep Jain Over a year ago

yeah no doubt :p

sriram · Accepted Answer · 2018-01-17 09:59:18Z

0

[(ngModel)]="product.checked";

100% working in angular 2

answered Jan 17, 2018 at 9:59

sriram

31 silver badge3 bronze badges

Collectives™ on Stack Overflow

Repeating checkbox input with nested ngFor

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related