如何在提交时从多个选中的复选框中获取 ID？离子 2+ / 角 2+答案

【问题标题】：How to grab ID from multiple selected checkbox's on submit? Ionic 2+ / Angular 2+如何在提交时从多个选中的复选框中获取 ID？离子 2+ / 角 2+
【发布时间】：2018-01-31 11:27:36
【问题描述】：

我在提交时无法获取选中项目的 ID。我可以在更改时检索选定的 ID，但不能在提交时检索。注意 - 我返回的数据没有检查值。所以可能有一种方法可以将选定的值推送到数据结构中，但不确定如何去做。

HTML

<form [formGroup]="itemForm" (ngSubmit)="submit(itemForm)">
    <ion-list >
      <div>
      <ion-item>
        <ion-checkbox formControlName="selectAll" (click)="checkAll()" [(ngModel)]="selectedAll" ></ion-checkbox>
      </ion-item> 

    <ion-item *ngFor="let item of items">
        <ion-label>
        {{item.text}}
        </ion-label>
        <ion-checkbox [checked]="selectedAll" formControlName="recvd" value="item.id" (ionChange)="select(item)"></ion-checkbox>
    </ion-item>

      </div>
        <button ion-button full type="submit"></button>
    </ion-list>
  </form>

export class MessagesPage {
selectedAll: boolean = false;
 items: [];

constructor(){}

submit(form){

  console.log(form.value, 'FORMVALUE HERE') // this returns true

}

select(item){

  console.log(item) //this returns the selected item on change with the id
}

}

【问题讨论】：

我对 ionic 不熟悉，这里可能不同，但在纯角度中，如果您尝试将 'value' 属性设置为 value="item.id"，它不会绑定它，它只会将其值设置为等于字符串“item.id”的字符串文字（即，不是名为 id 的项目对象的属性，只是一个字符串）。我认为您必须使用插值或属性绑定才能使其正确绑定。 [value]="item.id" 或 value="{{item.id}}"

标签： angular typescript ionic-framework ionic2 ionic3

【解决方案1】：

我不知道你为什么同时使用formControlName 和ngModel？但是你可以使用ngModel 来做到这一点，如下所示。你需要在items 数组上有一个boolean 属性，如checked。

    <ion-item *ngFor="let item of items">
        <ion-label>
        {{item.text}}
        </ion-label>
       <ion-checkbox checked="false" [(ngModel)]="item.checked" (ionChange)="select(item)"></ion-checkbox>
    </ion-item>

【讨论】：

【解决方案2】：

我实际上能够通过创建一个以 id 作为对象的 formbuilder 数组来解决这个问题，而不是上面的答案。并使用 ion-change 值来获取 id。感谢您的反馈！

this.itemForm = formBuilder.group({
  receivedItems: this.formBuilder.array([])
})

select(item: Items, isChecked: boolean){
  const receivedItems = <FormArray>this.itemForm.controls.receivedItems;

  if(isChecked) {
    receivedItems.push(new FormControl(item));

  } else {
      let index = receivedItems.controls.findIndex(x => x.value.id == item.id);
      receivedItems.removeAt(index);
  }
}

HTML

<form [formGroup]="itemForm" (ngSubmit)="submit(itemForm)">
            <ion-list >
              <div>
              <ion-item>
                <ion-checkbox formControlName="selectAll" (click)="checkAll()" [(ngModel)]="selectedAll" ></ion-checkbox>
              </ion-item> 

            <ion-item *ngFor="let item of items">
                <ion-label>
                {{item.text}}
                </ion-label>
                <ion-checkbox [checked]="selectedAll" value="item" (ionChange)="select(item, $event.checked)"></ion-checkbox>
            </ion-item>

              </div>
                <button ion-button full type="submit"></button>
            </ion-list>
          </form>

【讨论】：

如果你也能显示最新的html代码就好了？