CODEWITHSUNDEEP
angular
Brooke Clonts
Brooke Clonts

Reputation: 465

Repeating checkbox input with nested ngFor

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.

Upvotes: 0

Views: 3289

Answers (3)

sriram
sriram

Reputation: 3

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

100% working in angular 2

Upvotes: 0

Pardeep Jain
Pardeep Jain

Reputation: 86740

  • 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.

Upvotes: 2

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657248

This is invalid

([ngModel])

and should be

[(ngModel)]

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

Upvotes: 1

Related Questions