Ionic4 Alert Dynamic Checkboxes

Ionic Framework
1

Hi, everyone!

I am migrating from Ionic V3 to V4. I used to have an alert with dynamic checkboxes. The code used to be like this:

let alert = this.alertCtrl.create ();
alert.setTitle (this.alertTitle);
for (var i = 0; i < this.myArray.length; i ++) {
  alert.addInput ({
    type: 'checkbox',
    label: alert,
    value: '' + i,
    checked: false
  });
}

alert.addButton 'cancel');
alert.addButton ({
  text: 'ok',
  handler: data => {
    console.log ('hi')
  }
});
alert.present ();

But now I can initialize let alert = this.alertCtrl.create (); but I can’t access any method like alert.addInput ().

Is there any other way of doing this?

2

Maybe something like this:

export class HomePage {
  myArray = [];
  alertTitle = '';
  myInputs = [];

  constructor(public alertController: AlertController) {
    this.myInputs = this.createInputs();
  }

  createInputs() {
    const theNewInputs = [];
    for (let i = 0; i < this.myArray.length; i++) {
      theNewInputs.push(
        {
          type: 'checkbox',
          label: alert,
          value: '' + i,
          checked: false
        }
      );
    }
    return theNewInputs;
  }

  async presentAlertCheckbox() {
    const alert = await this.alertController.create({
      header: this.alertTitle,
      inputs: this.myInputs,
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          cssClass: 'secondary',
          handler: () => {
            console.log('Confirm Cancel');
          }
        }, {
          text: 'Ok',
          handler: () => {
            console.log('Confirm Ok');
          }
        }
      ]
    });

    await alert.present();
  }
}
6 Likes
3

That’s actually a great idea. Will try.

4

Forgot mention, I haven’t tested the code :wink:

5

Great It Is Working…

6

@ChrisGriiffith is it possible to have an checkbox which checks all dynamic checkboxes?

7 
createInputs() {
  const theNewInputs = [];
  for (let i = 0; i < this.myArray.length; i++) {
    theNewInputs.push(
      {
        type: 'checkbox',
        label: alert,
        value: '' + i,
        checked: true
      }
    );
  }
  return theNewInputs;
}

This will do.

8

Thank you so much, You saved my day…

9

Solution is good, but how to change/manipulate check/uncheck of myInputs?

10

I sorted this out that how to check/uncheck alert dynamically. I hope below code will help for those who stuck in this part.

handler: (data) => {
            console.log('Confirm Ok', data);

            let isMatch = false;
            for (let i = 0; i < this.filterArray.length; i++) {
              for (let j = 0; j < data.length; j++) {
                if (data[j].form == this.filterArray[i].form) {
                  isMatch = true;
                  break;
                } else {
                  isMatch = false;
                }
              }

              if(isMatch){
                // To make filter true again
                if(this.filterArray[i].checked == false){
                  this.filterArray[i].checked = true;
                }
              } else {
                this.filterArray[i].checked = false;
                isMatch = false;
              }
            }
}

Then you can Update your alert array again by

// Filling alert array
            this.filterInputs_alert = [];
            this.filterInputs_alert = this.fillAlertInputs();