Ionic 5 ion-alert: ngModel is not working when used inside message string

Ionic Framework Ionic Angular
1

Hi,

The quantity value is not getting bind in ngModel. can anyone tell how to bind quantity field and get user entered value on dismiss of alert?.
thanks in advance :grinning:

image

async presentAlertPrompt() {

this.quantity = 0;

const alert = await this.alertController.create({

  cssClass: 'my-custom-class',

  header: 'Prompt!',

  mode: 'ios',

  message: new IonicSafeString(`<ion-list><ion-item><ion-label position="stacked"><span>${this.cs.GlobalValue.quantity}</span></ion-label>

  <ion-input type="number" placeholder="enter quantity" min=0 [(ngModel)]="quantity"></ion-input></ion-item></ion-list>`),

  buttons: [

    {

      text: 'Cancel',

      role: 'cancel',

      cssClass: 'secondary',

      handler: () => {

        console.log('Confirm Cancel');

      }

    }, {

      text: 'Ok',

      handler: (event) => {

        console.log(this.quantity);

      }

    }

  ]

});

await alert.present();

alert.onDidDismiss().then(res => {

  console.log(this.quantity)

})

}

2

Use inputs instead of message.

3

Hi rapropos. thanks for the reply, yes that is an option when we have only input like (number, text, date etc). I have requirement where i need to show list of items using *ngFor and when i click any item, the value need to be set in ngModel.

4

Then, as the documentation says:

If you require a complex form UI which doesn’t fit within the guidelines of an alert then we recommend building the form within a modal instead.

I think you are outside of the intended usage zone for alerts.

5

ok i understood. thank you rapropos.