More than one radio selected in radio-group with ngFor

Ionic Framework Ionic Angular
1

I am having a problem using ion-radio-group with an *ngFor.
The radio group displays properly, but it doesn’t unselect a radio button
when I click on a different one. So, If I have 10 items on my list, and I click the
first 3, then those 3 radio buttons are selected (filled-in). I am
receiving the correct value from ionChange every time I click on a radio,
but it’s confusing to the user when multiple radios show as selected.

If I remove the ngFor and “hard-code” 4 different radio buttons, it works
correctly.

I have tried to put the *ngFor on the ion-list element with the same results.
I tried creating a div in place of the ion-list, with the same results.

thanks for your help.

Rick

HTML and TS code as follows:

HTML

<ion-list>
      <ion-radio-group allow-empty-selection="true" *ngFor="let trail of allTrails" 
                       (ionChange)="getTrail($event.detail.value)">
        <ion-item >
          <ion-label>Trail: {{ trail.id }} </ion-label>
          <ion-radio slot="start" [value]="trail.id"></ion-radio>
        </ion-item>
      </ion-radio-group>
    </ion-list>

TS


  getTrail(trail) {
    console.log("===>>> in getTrail, ev = ", trail);
  }

My software versions:
Ionic:

Ionic CLI : 6.5.0 (C:\Users\rick\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 5.1.1
@angular-devkit/build-angular : 0.803.26
@angular-devkit/schematics : 8.3.25
@angular/cli : 8.3.26
@ionic/angular-toolkit : 2.2.0

Capacitor:

Capacitor CLI : 1.5.2
@capacitor/core : 1.5.2

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : none
Cordova Plugins : no whitelisted plugins (1 plugins total)

Utility:

cordova-res : not installed
native-run : not installed

System:

NodeJS : v12.16.1 (C:\Program Files\nodejs\node.exe)
npm : 6.13.4
OS : Windows 10Preformatted textionicRadioGroup problem

2

I would put it on the <ion-item>.

1 Like
3
Thanks, rapropos. My first response was, "I tried that...still didn't work." But, I tried it again, and it looks like it DOES work. What I have now is: 

<ion-radio-group  (ionChange)="getTrail($event.detail.value)">
        <ion-item *ngFor="let trail of allTrails">
          <ion-label>Trail: {{ trail.id}} </ion-label>
          <ion-radio slot="start" [value]="trail.id"></ion-radio>
        </ion-item>
      </ion-radio-group>

Initial testing shows it is working correctly. More testing to follow.

Thank you. (like all programmers, “I’m sure sure I tried that before…” :sunglasses:

Rick

1 Like