ionic2 Angular 2绑定复选框,在表单中包含ngFor

Question

如何ngfor在表单中绑定检查器

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

点击所有内容或表单显示错误

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

Answer 1

您需要在contact对象中使用布尔字段来保存每个复选框的状态,就像您拥有a name或a一样cell.checked例如,您可以调用它,它将为每个联系人保留一个true或false值,具体取决于相应复选框的状态.

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