Ionic2 alert with dropdown?

Question

I am building an Ionic2 app. I have an alert like following:

constructor(private platform: Platform, public nav : NavController, 
    public exhibitionSurveyObjectService : ExhibitionSurveyObjectService ) {

    this.initializeMap();
    this.nav=nav;

    this.testArray=[];
    this.area=null;
  }

  addSurveyObject(){

    let prompt = Alert.create({
      title: 'Subscribe to our service',
      message: "All the fields are necessary",
      inputs: [
      {
        name: 'name',
        placeholder: 'Name'
      },
      ....
      {
        name: 'cycle',
        placeholder: 'Cycle: once/weekly/monthly'
      },
      {
        name: 'object_type',
        placeholder: 'Farm/Solarpanel/plain'
      },
      ],
      buttons: [
      ....   
      {
        text: 'Save',
        handler: data => {
          this.createExhibitionSuveyObject(data);
        }
      }
      ]
    });

    this.nav.present(prompt);
  }

  createExhibitionSuveyObject(data: any){

    var cycle = data.cycle;
    cycle = cycle.toUpperCase()
    console.log(cycle)

    var type = data.object_type;
    type = type.toUpperCase()
    console.log(type)

    this.exhibitionSurveyObjectService.addObject(
      data.name, data.farmer_email, 
      data.farmer_name, data.size, data.path, cycle, type).subscribe(

      response => {

        this.exhibitionSurveyObjects = response;
        this.sayThanks();

      },
      error =>  {

        this.errorMessage = <any>error; 
        console.log("error")
      }
      );
    }

    sayThanks(){

      let alert = Alert.create({
        title: 'Thank you!',
        subTitle: 'We have received your data, we will get back to you soon!',
        buttons: [{
          text: 'Ok',
          handler: () => {

            this.nav.push(HomePage)
          }
        }]
      });
      this.nav.present(alert);

    }

I want the last two fields to be dropdowns. How can I achieve this?

UPDATE: updated the code snippet with some more code. How it can be updated to use Modal instead of alert?

Answer 1

Just like you can see in Ionic2 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.

And...

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 you'll have to create a new Component with that form and then use it to create the Modal:

import { Modal, NavController, NavParams } from 'ionic-angular';

@Component(...)
class YourPage {

 constructor(nav: NavController) {
   this.nav = nav;
 }

 presentSubscriptionModal() {
   let subscriptionModal = Modal.create(Subscription, { yourParam: paramValue });
   this.nav.present(subscriptionModal);
 }

}

@Component(...)
class Subscription{

 constructor(params: NavParams) {
   let param = params.get('yourParam');
 }

}