Ion-radio buttons not selecting

Ionic Framework ionic-v3
1

Hello! I’m having trouble using (ionSelect) in my Ion Radio Group. I have three choices and placed ionSelect in a different area for each choice to find the correct placement - but it’s not firing! Here is my code:

      <ion-radio-group [(ngModel)]="paymentType" (ionSelect)="paymentChosen()">
        <ion-item lines="none">
          <ion-label lines="none">Cash</ion-label>
          <ion-radio slot="start" value="cash" (ionSelect)="paymentChosen()"></ion-radio>
        </ion-item>
        <ion-item lines="none">
          <ion-label lines="none" (ionSelect)="paymentChosen()">Credit Card</ion-label>
          <ion-radio slot="start" value="credit-card"></ion-radio>
        </ion-item>
        <ion-item lines="none" (ionSelect)="paymentChosen()">
          <ion-label lines="none">COD</ion-label>
          <ion-radio slot="start" value="cod"></ion-radio>
        </ion-item>
      </ion-radio-group>

In my .ts file:

  paymentChosen(){
    console.log('Working!')
  }

Nothing logs to the console. What do y’all advise?

Thanks!

2

If you’re not taking any arguments in paymentChosen, I don’t think even if you solve the problem you’re asking about, you’ll end up with any thing useful. I would recommend reading the reactive forms guide, and using FormControls instead of ngModel. That way you can do whatever you’re wanting to do in paymentChosen completely within the controller, avoiding polluting the template with it.

3

I’m familiar with FormControls and that seems like overkill for a simple Radio Button selection.

Only reason paymentChosen() doesn’t take any arguments was to first determine from where it would fire. After determining that, I would pass in the value from a radio option.

Within this same paymentChosen() function I’d call some service with the value passed from the radio list.

Is this ^ not possible with my approach of ionSelect?

4

I wouldn’t say it’s not possible, but it’s unusual and I would at least think carefully about how the principle of least surprise factors in here.

Typically, radio buttons aren’t drivers of action. One can click back and forth selecting and deselecting radio buttons, and all that really happens is that the selected item changes. There is usually a separate driver of action (like a submit button) that does something with whatever the selected radio is at the time the form is submitted. It sounds from your description that the “call some service” should be triggered not by the radio group, but by a submit button, in which case all this is mooted.

If, after contemplation, you insist that whatever paymentChosen is doing needs to be done whenever a radio selection is made, even if that choice hasn’t yet been made final with a submission action, I still think FormControl offers a cleaner way of doing that, because you can simply listen to its valueChanges instead of doing anything in the template.

5

Alright, I’ll take your advice and only use NgModel to update the values dependent on the user choice. I won’t submit an action if a user clicks on a radio option.

So ionSelect doesn’t work? :upside_down_face: