I'm currently working on implementing Radio Alerts within an Ionic2 application. To create a radio alert, I used the following code snippet:
let alert = this.alertCtrl.create();
alert.setTitle('Select a Radio Alert');
alert.addInput({
type: 'radio',
label: 'Side A',
value: 'a',
checked: false
});
alert.addInput({
type: 'radio',
label: 'Side B',
value: 'b',
checked: false
});
alert.addButton('Cancel');
alert.addButton({
text: 'OK',
handler: data => {
console.log('selected value '+data)
}
});
alert.present();
The radio alert appears when a user clicks on a button. Upon selecting the first radio button and clicking the OK button, the alert closes. However, upon reopening the alert, the previously selected radio button is no longer checked. It resets to its initial state each time.
I would like to maintain the selected radio button so that the user can view results based on their selection.
Check out the images below to see the issue:
https://i.sstatic.net/Dn3qN.png
https://i.sstatic.net/ygNtm.png
Here is the complete code for reference:
import { Component } from '@angular/core';
import { AlertController } from 'ionic-angular';
@Component({
selector: 'radio-alert-demo',
templateUrl: 'radio-alert-demo.html'
})
export class RadioAlertDemo {
constructor(private alertCtrl: AlertController) {
}
setFilter() {
let alert = this.alertCtrl.create();
alert.setTitle('Select a Radio Alert');
alert.addInput({
type: 'radio',
label: 'Side A',
value: 'a',
checked: false
});
alert.addInput({
type: 'radio',
label: 'Side B',
value: 'b',
checked: false
});
alert.addButton('Cancel');
alert.addButton({
text: 'OK',
handler: data => {
console.log('selected value '+data)
}
});
alert.present();
}
}