Ionic 2/3/4 AlertController radio (ionChange) event handling

user_5218548 0
Viewed 1050

Good evening everyone. Wanted to ask you if there's a handler for the ionic alert radio buttons that handles the check by itself , but not buttons with handlers. Let's say I'm checking a radio and after that I'd like to execute any callback, but not on buttons click. Is there a way to succeed doing that? Been digging in github last hour but found nothing..

import { AllertController } from 'ionic-angular';

...
constructor( public alertController : AlertController ) {}
...

let alertController = this.alertController.create({
  title: `Title`,
  inputs: [
    {
     type: 'radio',
     label: 'Testlabel',
     value: 'Testvalue'
    },
    {
     type: 'radio',
     label: 'Testlabel',
     value: 'Testvalue'
    }
  ],
  buttons: [
   { text: 'Cancel' },
   { text: 'Save' , handler: (data: any) => { // Want to execute that code 
     on input check , rather than on click on 'Save' button } }
  ]
});

alertController.present();

If there is no any solution related to Alert Controller module , I will be glad to receive any custom solutions , that can reproduce AlertController functionality and styles (Something else rather than ModalController + ViewController) or at least will be glad to know how to represent ModalController container with the same styles and behaviour like AlertController

Thanks and have a good evening to everyone!!!!

ionic2 ionic3 ionic4 ionic-framework cordova
1 Answers

AlertController inputs are of type AlertInput (see ionic 4 documentation)

Digging into ionic github repository I found AlertInput interface definition which is supposed to take an handler.

export interface AlertInput {
  type?: TextFieldTypes | 'checkbox' | 'radio';
  name?: string;
  placeholder?: string;
  value?: any;
  label?: string;
  checked?: boolean;
  disabled?: boolean;
  id?: string;
  handler?: (input: AlertInput) => void; // here it is!
  min?: string | number;
  max?: string | number;
}

This handler works with 'radio' and 'checkbox' input type, and doesn't seem to be implemented with 'text' input type.

Here is an example:

async presentAlertConfirm() {
  const alert = await this.alertController.create({
    header: 'Confirm!',
    message: 'Message <strong>text</strong>!!!',
    inputs: [
      {
        type: 'radio',
        label: 'Testlabel',
        value: 'radiovalue',
        placeholder: 'Placeholder 1',
        handler: (input) =>  {
          console.log(input.value); // will contain 'radiovalue'
        },
      }
    ],
    buttons: [
      {
        text: 'Cancel',
        role: 'cancel',
        cssClass: 'secondary',
        handler: (blah) => {
          console.log('Confirm Cancel: blah');
        }
      }, {
        text: 'Okay',
        handler: () => {
          console.log('Confirm Okay');
        }
      }
    ]
  });

  await alert.present();
}

In you component template html file:

<ion-button (click)="presentAlertConfirm()">Alert!</ion-button>
user_121893550
Related