Search code examples
ionic-frameworkionic3alertionic-native

Ionic3 Alert with Input Text and Radio Button


I am trying to incorporate input text and radio button in one alert dialog box. I have three options and if the user chose the third option, an input text will appear and the user needs to type something.

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.

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();

Here is the current output of my code.

enter image description here


Solution

  • You can't have different types of input inside ionic AllertController.

    You should use Modal Controller with formBuilder and then you can customize form as you want