Ionic 2 read checkbox value

Question

I am unable to read checkbox value in ionic 2 i tried following code

<div class="form-group">
            <label ></label>
            <div *ngFor="let mydata of activity" >
                <label>
                        <input type="checkbox"
                           name="activity"
                           value="{{mydata.activity_id}}"

                            [checked]="activity.includes(mydata)" 

             (change)="changeSchedules(mydata)"
                           />
                    {{mydata.activity_name}}

                </label>
            </div>
        </div>

script file

this.subscriptionForm = new FormGroup({

        activity: new FormArray(this.subscription.schedules.map(schedule => new FormControl(schedule)), Validators.minLength(1))
    });

changeSchedules(mydata: any) {

  var currentScheduleControls: FormArray = this.subscriptionForm.get('activity') as FormArray;
  var index = currentScheduleControls.value.indexOf(mydata);


    if(index > -1) 
    {currentScheduleControls.removeAt(index) }

    else 
{

    currentScheduleControls.push(new FormControl(mydata));
}

}

i searche so many things but i did not get proper solution can somebody help to figure out this

Answer 1

Please following i think it will help you

your .ts file code

export class FormComponent {
 cbArr: string[];
    cbChecked: string[];
  constructor() {
    this.cbArr = ['OptionA', 'OptionB', 'OptionC'];
    this.cbChecked = [];
  }

  powers = ['Really Smart', 'Super Flexible',
            'Super Hot', 'Weather Changer'];

  model = new Hero(18, 'Dr IQ', this.powers[0], 'Chuck Overstreet');

  submitted = false;



  // TODO: Remove this when we're done
  get diagnostic() { return JSON.stringify(this.model); }

updateCheckedOptions(chBox, event) {
      var cbIdx = this.cbChecked.indexOf(chBox);

      if(event.target.checked) {
          if(cbIdx < 0 ){
               this.cbChecked.push(chBox);
             console.log(chBox);
          }

      } else {
          if(cbIdx >= 0 ){
             this.cbChecked.splice(cbIdx,1);
              console.log(cbIdx);
          }

      }
  }
   updateOptions() {
    console.log(this.cbChecked);
  }
  /////////////////////////////

}

and your html code

      <label for="options">Options :</label>
        <div *ngFor="let cbItem of cbArr">
          <label>
            <input type="checkbox"
                   name="options"
                   value="{{cbItem}}"
                   [checked]="cbChecked.indexOf(cbItem) >= 0"
                   (change)="updateCheckedOptions(cbItem, $event)"/>
            {{cbItem}}
          </label>
 <button (click)="updateOptions()">Post</button>

updateOptions() you will get all selected check box value

Answer 2

Try this code of example

@Component({
  templateUrl: 'example-page.html'
})
class ExamplePage {
  cb_value: boolean;

  updateCbValue() {
    console.log('Something new state:' + this.cb_value);
  }
}

<ion-list>

   <ion-item>
     <ion-label>Something</ion-label>
     <ion-checkbox [(ngModel)]="cb_value" (ionChange)="updateCbValue()"></ion-checkbox>
   </ion-item>

 </ion-list>