CODEWITHSUNDEEP
angularionic2
LeRoy
LeRoy

Reputation: 4436

ionic2 Angular 2 bind checkboxes with a ngFor inside a form

How do I bind a checkerbox with ngfor within a form

    <ion-list *ngSwitchWhen="'contacts'">
        <ion-item *ngFor="#contact of contacts">
            <ion-label> {{contact.name}}</ion-label>
            <ion-checkbox checked="false" [(ngModel)]="newMessage.contact"></ion-checkbox>
            <ion-note item-right>
                {{contact.cell}}
            </ion-note>
        </ion-item>
    </ion-list>

Everything gets clicked or the form displays a error

if (form.valid) {
    console.log(this.newMessage);
}

Upvotes: 1

Views: 8248

Answers (2)

Manu Vald&#233;s
Manu Vald&#233;s

Reputation: 2372

You need a boolean field in the contact object to hold the state of each checkbox, the same way you have a name or a cell. You could call it checked for instance, and it will hold a true or false value for each contact depending on the state of the respective checkbox. 

 <ion-list *ngSwitchWhen="'contacts'">
        <ion-item *ngFor="#contact of contacts">
            <ion-label> {{contact.name}}</ion-label>
            <ion-checkbox checked="false" [(ngModel)]="contact.checked"></ion-checkbox>
            <ion-note item-right>
                {{contact.cell}}
            </ion-note>
        </ion-item>
    </ion-list>

Upvotes: 7

LeRoy
LeRoy

Reputation: 4436

Had to find out the hard way but you can add a object within a ngModal.I'm guessing but this could also work for radio boxes, hope this will help someone.

    <ion-list *ngSwitchWhen="'contacts'">
        <ion-item *ngFor="#contact of contacts">
            <ion-label> {{contact.name}}</ion-label>
            <ion-checkbox [(ngModel)]="newMessage[contact.id]"></ion-checkbox>
            <ion-note item-right>
                {{contact.cell}}
            </ion-note>
        </ion-item>
    </ion-list>

Upvotes: 1

Related Questions