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

必须找到困难的方法，但您可以在 ngModal.I 猜测范围内添加一个对象，但这也适用于单选框，希望这会对某人有所帮助。

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

Answer 2

您需要 contact 对象中的布尔字段来保存每个复选框的状态，就像您拥有 name 或 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>

ionic2 Angular 2 在表单中使用 ngFor 绑定复选框

ionic2 Angular 2 bind checkboxes with a ngFor inside a form

ionic2

angular