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
Related
I am integrating PayPal in ionic3 app, whenever I click on make payment it redirects to paypal site, there I enter username and password and each time it says "invalid username and/or password", but I am adding correct credentials for login.
please help
Here the code:
import { PayPal, PayPalPayment, PayPalConfiguration } from '#ionic-native/paypal';
payWithPaypal(){
//let amount = parseFloat(HomePage.orderinfo.total);
this.payPal.init({
PayPalEnvironmentProduction: 'AdXXXXXXXXXXXXXXXX',
PayPalEnvironmentSandbox: 'YOUR KEY'
}).then(() => {
this.payPal.prepareToRender('PayPalEnvironmentProduction', new PayPalConfiguration({
})).then(() => {
let payment = new PayPalPayment(this.paymentAmount, this.currency, 'description', 'sale');
this.payPal.renderSinglePaymentUI(payment).then((res) => {
this.online('PAYPAL',res.response.id);
this.responseData = JSON.stringify(res, null, 1);
let alert = this.alertCtrl.create({
title: 'La orden ha sido agregada',
subTitle: "El id de su gestion es: " + res.order_number,
buttons: [{
text: "OK",
handler: () => {
this.navCtrl.setRoot(HomePage);
this.navCtrl.push(OrderConfirmPage,{ OrderId: this.responseData.success });
}
}]
});
alert.present();
}, (err) => {
let alert = this.alertCtrl.create({
title: 'Error intentando conectar',
subTitle: err,
buttons: ['Dismiss']
});
alert.present();
});
}, (err) => {
let alert = this.alertCtrl.create({
title: 'Error con la configuracion',
subTitle: err,
buttons: ['Dismiss']
});
alert.present();
});
}, (err) => {
let alert = this.alertCtrl.create({
title: 'Error con el plugin de PayPal',
subTitle: err,
buttons: ['Dismiss']
});
alert.present();
});
}
This is the screen capture
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'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();
}
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...
}
}
}
]
});