I'm used Ionic 3 and I'm try to display label for behind the input fields ,but it's not display,why is not showing? please help me to fix it
Thanks
doPrompt() {
let prompt = this.alertCtrl.create({
title: '5 Rooms Available',
message: "",
inputs: [
{
label: "Single Rooms (3)",
name: 'Single Rooms (3)',
placeholder: '$200.00',
},
],
buttons: [
{
text: 'Cancel',
handler: data => {
console.log('Cancel clicked');
}
},
{
text: 'Set',
handler: data => {
console.log('Saved clicked');
}
}
]
});
prompt.present();
}
Related
Have a menu on Ionic action sheet and we need to set more two option to share the content, one icon to share using email and other whatsapp.
Has anyone made a menu with an icon like that?
Now, it is like this
The code
async menu(channelId: any, title: any) {
const actionSheet = await this._ActionSheetController.create({
backdropDismiss: false,
header: title,
buttons: [
{
icon: 'mail-outline',
handler: () => {}
},
{
icon: 'logo-whatsapp',
handler: () => {}
},
{
text: this._TranslocoService.translate('channel.FollowedChannelsPage.stopFollowChannel'),
icon: 'person-remove-outline',
handler: () => {
this.stopFollow(channelId)
}
},
{
text: this._TranslocoService.translate('others.close'),
icon: 'close',
role: 'destructive'
}
]
});
await actionSheet.present();
}
when I call this.AlertProvider.presentConfirm() then an ionic popup confirmation display on click confirm button i want to return true/false
presentConfirm() {
let alert = this.alertCtrl.create({
title: 'Confirm Activate',
message: 'Do you want to Disable',
buttons: [
{
text: 'Cancel',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
},
{
text: 'Confirm',
handler: () => {
console.log('submit clicked');
}
}
]
});
alert.present();
}
var confirm_value = this.AlertProvider.presentConfirm();
alert(confirm_value);
I am getting a push notification using Firebase and showing it in alert box. Now I want to display the message i received in a text field so that user can edit the message.I also want to output the message in console.
pushObject.on('notification').subscribe((notification: any) => {
if (notification.additionalData.foreground) {
let youralert = this.alertCtrl.create({
title: 'New Push notification',
message: notification.message,
buttons: [
{
text: 'Cancel',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
},
{
text: 'Okay',
handler: () => {
console.log('Okay clicked');
}
}
]
});
There's a inputs property on the Alert interfacce, it works pretty much like the buttons. It's an array of objects and you have a input value property to set the desired value.
Since i don't know where you want to log you value and if it's the value that has come from the server or the edited value, i'll show both.
pushObject.on('notification').subscribe((notification: any) => {
if (notification.additionalData.foreground) {
console.log('push message', notification.message);
let youralert = this.alertCtrl.create({
title: 'New Push notification',
inputs: [{
placeholder: 'Your placeholder..',
type: 'text',
name: 'yourInputName, // Name to get it in your handler callback
value: notification.message
}],
message: notification.message,
buttons: [
{
text: 'Cancel',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
},
{
text: 'Okay',
// you'll need to get the input data, so pass a parameter to the callback
handler: (data) => {
// here's the value user has edited in the input
console.log('Edited message', data.yourInputName);
console.log('Okay clicked');
}
}
]
});
Hope this helps
I have add one alert input field to change password,But How can we give validation to input field in ionic?
account.ts
changePassword(){
let alert = this.alertCtrl.create({
title: 'Change Password',
buttons: [
'Cancel']
});
alert.addInput({
name: 'Password',
value: this.password,
placeholder: 'password'
});
alert.addButton({
text: 'Ok',
handler: (data: any) => {
this.userData.setUsername(data.username);
let accountData=new FormData();
accountData.append('userid',this.userid),
accountData.append('password',data.Password)
this.works.changePassword(accountData).subscribe(res=>{
console.log(res),
err=>{
console.log(err)
}
})
}
});
alert.present();
}
You can use alert.setMessage('text') method to show validation message and don't forgot to add return false after validation to prevent alert dismiss.
public displayToAlert(title, subTitle) {
let alert = this.alertCtrl.create({
title: title,
subTitle: subTitle,
message: '',
enableBackdropDismiss: false,
inputs: [
{name: 'userEmail',
placeholder: 'Email Id'}
],
buttons: [{
text: 'Cancel',
handler: () => {
}
},{
text: 'Send',
handler: datas => {
if(datas.userEmail != null && datas.userEmail.length > 0){
this.onExportNew();
}else{
alert.setMessage('<b style="color: red;">Enter valid email id.</b>');
return false;
}
}
}]
});
alert.present();
}
For Reference : Alert controller input box validation
I am trying to get two confirmations from user one after another. If the first one is cancelled, there is no need to get the second one. But if the first one is agreed on, then the second one should be shown and processed. I am using a piece of code like this
showConfirmation1() {
let confirm = this.alertCtrl.create({
title: 'C1',
message: "M1",
buttons: [
{
text: 'No',
},
{
text: 'Yes',
handler: data => {
this.showConfirmation2();
}
}
]
});
showConfirmation2() {
let confirm = this.alertCtrl.create({
title: 'C2',
message: "M2",
buttons: [
{
text: 'No',
},
{
text: 'Yes',
handler: data => {
this.doYourJob();
}
}
]
});
If user cancels the first one, everything works fine. If user accepts the first one, the second one is shown properly. However, the second one kinda freezes. Neither its No button nor its Yes button work. It does not even vanishes when you click on other areas of the page.
UPDATE:
Found a cleaner solution that requires less code and is easier to understand.
By returning false in the button handler you prevent the alert from closing. And the dismiss-function returns a Promise that gets resolved when the transition is complete. So thats where we will call the function to open the second alert.
showConfirmation1() {
let confirm = this.alertCtrl.create({
title: 'C1',
message: "M1",
buttons: [
{
text: 'No',
},
{
text: 'Yes',
handler: data => {
confirm.dismiss()
.then(() => {
this.showConfirmation2();
});
return false;
}
}
]
});
confirm.present();
}
ORIGINAL:
Make use of the dismiss(data:any) function on your first alert. And pass a value that indicates that it was not cancelled. In the onDidDismiss-function check for this value. If its there present the second alert.
showConfirmation1() {
let confirm = this.alertCtrl.create({
title: 'C1',
message: "M1",
buttons: [
{
text: 'No',
},
{
text: 'Yes',
handler: data => {
confirm.dismiss({ showSecond: true });
return false;
}
}
]
});
confirm.onDidDismiss(data => {
if(data && data.showSecond){
this.showConfirmation2();
}
}
confirm.present();
}