Programmatically change radio button value

Ionic Framework
1

I’m using radio buttons on a form. Everything is fine when changing the value via the user interface. However, if I change the ngModel value in code the radio group gets de-selected and then the ngModel value (eventually) gets changed to undefined. What am I doing wrong?

HTML:

<ion-radio-group (click)="doTextSearch()" [(ngModel)]="showOnlyRated">
    <ion-row>
        <ion-col>
            <ion-item>
                <ion-label>All</ion-label>
                <ion-radio mode="md" value="1"></ion-radio>
            </ion-item>
        </ion-col>

        <ion-col>
            <ion-item>
                <ion-label>Rated</ion-label>
                <ion-radio mode="md" value="2" [disabled]="! userService.isUserLoggedIn"></ion-radio>
            </ion-item>
        </ion-col>

        <ion-col>
            <ion-item>
                <ion-label>Rated by Me</ion-label>
                <ion-radio mode="md" value="3" [disabled]="! userService.isUserLoggedIn"></ion-radio>
            </ion-item>
        </ion-col>
    </ion-row>
</ion-radio-group>

Code where I change the value is simply:

this.showOnlyRated = 3;

What can I do to make this work?

Versions:
@ionic/angular: 4.11.4
@angular/common: 8.2.13

2

I’m curious if you see the same problem switching from 1/2/3 to a/b/c for the model.

3

I changed the model value to be a string instead of an integer and that appears to work, so thanks! It’s a bit disconcerting to fail like that due to the data type but I’ll make sure to use strings for all radio buttons. Cheers!

4

It’s yet another thing I hate about JavaScript.