Search code examples
ionic2ionic3

Ionic: Showing an alert controller with a checkbox and text input


I am trying to show a checkbox along with a text input field. (Ionic 3.5.3)

The checkbox is not showing up. I looked at another SO thread for a similar question. The code seems to be the same as what I am doing.

The code:

let alert = this.alert.create({
      title: 'Name your trip',
      inputs: [
      {
        name: 'name',
        placeholder: 'Your trip name',
      },
      {
         name: 'gpsxy',
         type:'checkbox',
         checked:true,
         label:'Log GPS co-ords',
         value:"true"
      }
    ],

      buttons: [{
        text: 'Cancel',
        role: 'cancel',
        handler: data => {
        }
      },
      {
        text: 'Ok',
        handler: data => {
      }],
    });
    alert.present();

And here is the screenshot:enter image description here


Solution

  • Just like you can see in the docs

    Alerts can also include several different inputs whose data can be passed back to the app. Inputs can be used as a simple way to prompt users for information. Radios, checkboxes and text inputs are all accepted, but they cannot be mixed. For example, an alert could have all radio button inputs, or all checkbox inputs, but the same alert cannot mix radio and checkbox inputs. Do note however, different types of "text"" inputs can be mixed, such as url, email, text, etc. If you require a complex form UI which doesn't fit within the guidelines of an alert then we recommend building the form within a modal instead.

    So I'm afraid that it's not possible to do that in Ionic :(