送信時に複数の選択されたチェックボックスからIDを取得する方法は？ Ionic 2+/Angular 2+

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を以下のように使用して行うことができます。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> 

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>