Question

我无法在提交时获取已检查项目的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>

TS

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
}

}

Answer 1

我不知道为什么你同时使用formControlName和ngModel？但您可以使用ngModel执行此操作，如下所示。您需要在boolean数组上添加checked items属性。

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

Answer 2

而不是上面的答案，我实际上能够通过创建一个id为对象的formbuilder数组来解决这个问题。并使用离子变化值来获取id。我很感激您的反馈！

TS

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>

如何从提交的多个选中的复选框中获取ID？ Ionic 2+ / Angular 2+

2 个答案: