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

Answer 2

不得不找出困难的方法，但你可以在ngModal中添加一个对象。我在猜测，但这也适用于收音机盒，希望这会对某人有帮助。

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

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

2 个答案: