Ionic3 Alert with Input Text and Radio Button

Ionic Framework ionic-v3
1

Hello everyone,

I want to create an ionic alert that will have both radio buttons and text inputs. I have three options and if the user chose the third option, an input text will appear and the user needs to type something.

Here is my code and the sample output.

let alert = this.alertCtrl.create({
        title: 'Select one?',
        message: "Please select one or enter something",
        inputs: [
          {
            type: 'radio',
            label: 'Option 1',
            value: 'Option 1',
          },
          {
            type: 'radio',
            label: 'Option 2',
            value: 'Option 2',
          },
          {
            type: 'radio',
            label: 'Other Option',
            value: 'Other Option',
          },
          {
            type: 'text',
            placeholder: 'Enter other option',
          }
        ],
        buttons: [
          {
            text: 'Submit',
            handler: (data: any) => {
              console.log(data);
            }
          }
        ]
      });
      alert.present();

image

I’ve searched on the internet but I can’t find something that can help me with this. I hope someone can help me with this.

2

use a modal dialog…

3

I’ve already took that into considerations but my interface will be compromised. But, if there’s no way of doing that other than making a modal dialog then I guess I have no choice. Thank you :smile::blush: