I want put 2 radio buttons for male and female on an alertcontroller. I've got this:
let prompt = this.alertCtrl.create({
title: 'Add Participant',
inputs: [
{
name: 'name',
placeholder: 'Name'
},
{
name: 'surname',
placeholder: 'Surname'
},
{
name: 'radiom',
type: 'radio',
label: 'Male',
value: 'M'
},
{
name: 'radiof',
type: 'radio',
label: 'Female',
value: 'F'
}
],
buttons: [
{
text: 'Cancel',
handler: data => {
console.log('Cancel clicked');
}
},
{
text: 'Add',
handler: data => {
const newParticipant = this.participantsList.push([]);
newParticipant.set({
id: newParticipant.key,
name: data.name,
surname: data.surname,
paid: false,
sex: data.radiom
});
}
}
]
});
But it doesn't look like something I've already see: I can't see the labels 'Male' and 'Female' and the radio buttons seem to be "old", I can select both of them, something completly different from the radioalert in the Ionic documentation. Moreover, how I can push to the list the value of 'M' or 'F' in the property 'sex'?
Sebastian Straburzyński :
unfortunately you can't mix radio button with other input types like text in Ionic AlertController. The simplest solution is creating modal page with this form and pass data back from this modal to your page. I made simple example for you on stackblitz:\n\nhttps://stackblitz.com/edit/ionic-jum7ch \n\nIn your page:\n\nopenAlert(){\n let addModal = this.modalCtrl.create(ParticipantModalPage);\n addModal.onDidDismiss((participant) => {\n if(participant){\n // handle participant date here\n this.participant = participant;\n console.log('data from modal: ', participant);\n }\n });\n addModal.present();\n}\n\n\nIn modal page:\n\nreturnParticipant() {\n let participant = {\n name: this.name,\n surname: this.surname,\n sex: this.sex\n };\n this.view.dismiss(participant);\n}\n",
2018-03-07T18:42:18