CODEWITHSUNDEEP
ionic2
user8258331
user8258331

Reputation:

ionic 2 Prompts alert

how to insert radio button and text input inside Prompts alert in ionic 2. it's work only with text input or radio button. but i want to add radio button group with radio buttons to select only one option and text input in one alert prompt.

my coding 

  let prompt = this.alertCtrl.create({
  title: 'Add Course',
  message: "Enter Course Detailes",
  inputs: [

    {
      name: 'id',
      placeholder: 'Course ID'
    },

     {
      name: 'img',
      placeholder: 'Image url'
    },
     {
      name: 'title',
      placeholder: 'Title'
    },
      {
      name: 'Details',
      placeholder: 'Details'
    },
         {
      type:'radio',
      label:'something1',
      value:'something1'
    },
    {
     type:'radio',
     label:'something2',
     value:'something2'
     }
     ],
     buttons : [
     {
     text: "Cancel",
     handler: data => {
     console.log("cancel clicked");
     }
     },
     {
     text: "Save",
     handler: data => {
     console.log("search clicked");
     }
     }
     ]
     });
     prompt.present();

output

Upvotes: 0

Views: 634

Answers (1)

Suraj Rao
Suraj Rao

Reputation: 29635

According to the documentation:

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.

You should use a separate component with a modal controller

@Component(...)
class AddCourses {
 courseForm:FormGroup
 constructor(params: NavParams) {
 }
  //create the form reactive or template driven
}

In your parent page,

 let coursesModal = this.modalCtrl.create(AddCourses, data);
   coursesModal.present();

Upvotes: 2

Related Questions