CODEWITHSUNDEEP
androidangularionic-framework
WirtsHaus
WirtsHaus

Reputation: 29

Ionic: Set default checked of ion-radio by variable

Current Versions: Ionic 6.7.0

Hello, this is my first question on stackoverflow, so please be forgiving if some information are missing.

I try to include a radio-group that should be equal to a variable of my .ts-file. I pass an 'id' between two pages, so the user doesn't always have to re-select it.

Thats what I tried, but I can't get a default selected radio-button working.

home.page.html:

                        <ion-radio-group (ionChange)="carChangeEvent($event)"  [(ngModel)]="car_id">

                        <ion-item>
                            <ion-label>Button 1</ion-label>
                            <ion-radio slot="start" value="1"></ion-radio>
                        </ion-item>

                        <ion-item>
                            <ion-label>Button 2</ion-label>
                            <ion-radio slot="start" value="2"></ion-radio>
                        </ion-item>

                        <ion-item>
                            <ion-label>Button 3</ion-label>
                            <ion-radio slot="start" value="3"></ion-radio>
                        </ion-item>

                    </ion-radio-group>

home.page.ts:

export class HomePage {

    public car_id: string = "1";
    ...




    constructor(...) {...}


    carChangeEvent (event) {
        switch(this.car_id) { 
            case "1": { 
                ...do stuff by car_id...
            break; 
            } 
            case "2": {  
                ...do stuff by car_id...
            break; 
            }
            case "3": { 
                ...do stuff by car_id...
            break; 
            } 
            default: { 
                this.msg2 = "switch default";
                console.log('ERROR: Invalid car identifier: ' + event.target.value);
            break; 
            } 
        } 
    }

Any solutions or hints?

Edit 1: I ran it on my device as well and comparing to the ionic serve instance the default radio selection is shown correctly. However, when i changed the value on another page and return to the home.page, no radio-button is selected (but the value is correct). When I set another value by e.g. an <ion-input [(ngModel)]="car_id">, a radio-button gets selected correctly according to the input-value.

Upvotes: 2

Views: 7804

Answers (4)

Sid VN
Sid VN

Reputation: 1

Using [value] in ion-radio with [(ngModel)] on ion-radio-group worked for me.

-- sample code

<ion-radio-group name="type" [(ngModel)]="type" [value]="type">
   <ion-list-header>
      <ion-label>
         Use as
      </ion-label>
   </ion-list-header>

   <ion-item>
       <ion-label>Billing Address</ion-label>
       <ion-radio [value]="2"></ion-radio>
   </ion-item>

   <ion-item>
        <ion-label>Shipping Address</ion-label>
        <ion-radio [value]="1"></ion-radio>
   </ion-item>

   <ion-item>
        <ion-label>Both Billing and Shipping</ion-label>
        <ion-radio [value]="0"></ion-radio>
   </ion-item>

</ion-radio-group>

Upvotes: -1

Siddhartha Mukherjee
Siddhartha Mukherjee

Reputation: 2943

If that function is not changing the status value, you don't need those (click) events. We have a sample radio group in our tests that do not have any click events:

<ion-list radio-group [(ngModel)]="gender">
    <ion-radio value="male">Male</ion-radio>
    <ion-radio value="female">Female</ion-radio>
</ion-list>

Upvotes: 0

WirtsHaus
WirtsHaus

Reputation: 29

I finaly got solved it. I defined a wrong data-type in the queryParams : 'NavigationExtras', so the switch/case was not able to enter the correct case. => Everything is fine and working correctly.

Upvotes: 0

Balastrong
Balastrong

Reputation: 4464

Try to put [value]="car_id" in your <ion-radio-group> tag.

Upvotes: 0

Related Questions