CODEWITHSUNDEEP
angulartypescriptionic-frameworkionic2ionic3
userlkjsflkdsvm
userlkjsflkdsvm

Reputation: 973

How to grab ID from multiple selected checkbox's on submit? Ionic 2+ / Angular 2+

I'm having trouble getting the id of the checked item on submit. I'm able to retrieve the selected id on change but not on submit. Note - the data that I'm getting back does not have a checked value. So there might be a way to push a selected value into the data structure but unsure how to do so.

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
}

}

Upvotes: 1

Views: 1486

Answers (2)

userlkjsflkdsvm
userlkjsflkdsvm

Reputation: 973

Instead of the answer above I was actually able to figure it out with creating a formbuilder array with the id's as objects. And used the ion-change value to grab the id. I appreciate the feedback!

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>

Upvotes: 0

Sampath
Sampath

Reputation: 65860

I don't know why you used both formControlName and ngModel? But you can do it using ngModel as shown below.You need to have a boolean property like checked on your items array.

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

Upvotes: 2

Related Questions