I'm new to Ionic and I'd like to use the Ionic alert to change a password for a user.
At the moment I got this:
let alert: Alert = Alert.create({
title: 'Forgot Password',
subTitle: 'Enter a new password',
inputs: [
{
name: 'password',
type: 'password',
placeholder: 'New Password'
},
{
name: 'confirm_password',
type: 'password',
placeholder: 'Confirm Password'
}
],
buttons: [
{
text: 'Change Password',
handler: data => {
if (data.password != data.confirm_password) {
return false;
} else {
...some requests sent...
}
}
}
]
});
Now, if I type 2 different passwords, the alert isn't dismissed, but I'd like to display a message on the alert.
Can this be done with Ionic Alert? I didn't manage to find anything.
Thanks!
You're better off using $ionicPopup which is meant for user input. It takes in a scope so that you can do the angular you're looking for. Unfortunately, you cannot programmatically disable the save button if the passwords don't match.
$ionicPopup.show({
template: '<input type="password" ng-model="data.password">' +
'<input type="password" ng-model="data.confirm_password">' +
'<div ng-show="data.password!=data.confirm_password>Passwords do not match</div>'
title: 'Forgot Password',
subTitle: 'Enter a new password',
scope: $scope,
buttons: [
{ text: 'Cancel' },
{
text: 'Save',
type: 'button-positive',
onTap: function(e) {
if (data.password != data.confirm_password) {
return false;
} else {
...some requests sent...
}
}
}
]
});
Related
I am trying to incorporate input text and radio button in one alert dialog box. I have three options and if the user chose the third option, an input text will appear and the user needs to type something.
I've searched on the internet but I can't find something that can help me with this. I hope someone can help me with this.
Here is my code and the sample output.
let alert = this.alertCtrl.create({
title: 'Select one?',
message: "Please select one or enter something",
inputs: [
{
type: 'radio',
label: 'Option 1',
value: 'Option 1',
},
{
type: 'radio',
label: 'Option 2',
value: 'Option 2',
},
{
type: 'radio',
label: 'Other Option',
value: 'Other Option',
},
{
type: 'text',
placeholder: 'Enter other option',
}
],
buttons: [
{
text: 'Submit',
handler: (data: any) => {
console.log(data);
}
}
]
});
alert.present();
Here is the current output of my code.
You can't have different types of input inside ionic AllertController.
You should use Modal Controller with formBuilder and then you can customize form as you want
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'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();
}