Ionic alert input values are not available in handler


#1

I just used this same example here: link.

here is my code and info:

and here is the result : even in simulator as well as real device (ipad). I tried by just placing place holder of with out any value to it as well as empty value to input.


#2

How does the screenshot match your code? I see no console.log in there that could match the screenshot.


#3

Please look again here in above picture:

>>


#4

Ah, the value of formatting the code in a way that is expected…

Does it work if you do not have a value defined for the username input as in the actual example in the docs?


#5

Did it work in browser with ionic serve?
I tried it in browser where it works fine:

import { Component } from '@angular/core';
import { AlertController, NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  template: `
    <ion-header>
      <ion-navbar>
        <ion-title>Home</ion-title>
      </ion-navbar>
    </ion-header>

    <ion-content padding>
      <button ion-button (click)="presentAlert()">Alert</button>
    </ion-content>
  `
})
export class HomePage {

  constructor(public navCtrl: NavController, private alertCtrl: AlertController) {
    
  }

  presentAlert() {
    const alert = this.alertCtrl.create({
      title: 'Login',
      inputs: [
        {
          name: 'username',
          placeholder: 'Username',
          value: 'user'
        },
        {
          name: 'password',
          placeholder: 'Password',
          type: 'password'
        },
      ],
      buttons: [
        {
          text: 'Submit',
          role: 'submit',
          handler: data => {
            if(data.username.trim()) {
              return true;
            }
            console.log('Returning false prevents alert to close!')
            return false;
          }
        },
        {
          text: 'Cancel',
          role: 'cancel',
          handler: data => console.log('Cancel clicked')
        }
      ]
    });
    alert.onDidDismiss((data, role) => {
      console.log('Data:', data);
      console.log('Role:', role);
    });
    alert.present();
  }
}


#6

As like i mentioned in post description, I tried with not providing ‘value’ to ‘inputs’ array. It didn’t worked. So i came to this fallback of defining ‘value’ : ["", “xyz”, “null”]. Still no sweet.

@Nexi : I am sorry to say, I know it will work well with browser by Ionic Serve. But my application is strictly native. (cause i am dealing with offline files in device library directory. ). So i am looking for a reason / solution to this issue.

thanks for trying it out… @Nexi


#7

Thats from my production app and its working fine on android devices:

this.alert.create({
      title: 'New Calculation',
      inputs: [
        {
          type: 'text',
          name: 'description',
          placeholder: 'Description'
        }
      ],
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel'
        },
        {
          text: 'Create',
          handler: (inputs: { description: string }) => {
            if (!inputs.description.trim()) {
              this.alert.create(
                { message: 'Your input is invalid. Description is missing.', buttons: [{ text: 'OK' }] }
              ).present();
              return;
            }
            this.calculationProvider.put(createCalculation(inputs.description));
          }
        }
      ]
    }).present();

#8

Thanks again for providing your prod code. But i don’t why, it is still not working at my end. Even i tried the same chunk you provided.

here is my proof:

@Sujan12: can you suggest for any way like, Do i need to check any package in AlertController of Ionic-angular ??


#9

I tried your code in my app on ios simulator and it is working fine:


Your console is throwing some api errors regarding UIKBCompat…
Maybe that has to do something with keyboard inputs and prevents your code to run correctly.


#10

Thanks a lot again for this attempt. I think you are correct. so, that UIKBComponent error is related to this. that is some how 2nd generation IPAD SImmulator is throwing those errors.

but here is my Native Device (IPad 3rd Gen) debug log: it is clear. Hope you are already aware of these. Selected 18 lines log are safe and device and components fire events.

but last two lines of JSON {"username":"","password":""} . is my 1st console log.

And here comes the legend: IPad Pro (9’’ Inches)

which is throwing some strange erros like

Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKit/UIView.h> may also be helpful.
2018-03-19 15:10:56.419906-0500 LeathernecksForm[83919:3008483] [LayoutConstraints] Unable to simultaneously satisfy constraints.

I think now it is some how moving out of my scope “NSComponents” (Swift/objectc – which i don’t know).

Can some one help me regarding this errors… @Sujan12, @mhartington, @brandyshea


#11

It’s been 2 months, still not found any reason for this issue for only one of my project.
I know this alert feature is cool, and it should work always, but some how not in one of my Project.

this time, I tried with browser level by ionic serve . Still now luck.

Step 1: On very first page of App Alert pop view working.

Step 2: When i click on any keyboard key on input field, thats it … BOOMMMMMMM …

Same code … same error …