Ion-radio with checked="true" does not work?

Ionic Framework ionic-v3
1

Hi,

I wanted to try the ion-radio component. Seems to work, but if I put one of my radio with checked=“true”, it does not check it by default when the view loads. Any thoughts?

<ion-radio value="byUnitId" checked="true">
  Unit ID
</ion-radio>

<ion-radio value="byMac">
  MAC Address
</ion-radio>

<ion-radio value="byUnitName">
  Unit Name
</ion-radio>
2

I’ve ended up with this:

<ion-list radio-group [(ngModel)]="status">
  <ion-list-header>Status</ion-list-header>
  <ion-radio (click)="changeStatus('0')" value="0">
      Status 0
  </ion-radio>
  <ion-radio (click)="changeStatus('1')" value="1">   
       Status 1
  </ion-radio>
  <ion-radio (click)="changeStatus('2')" value="2"> 
        Status 2
  </ion-radio>
</ion-list>

I think there’s cleaner ways but this works for me.

3 Likes
3

You shouldn’t need those (click) events (unless that function is doing something other than changing the value of status), we have a sample radio group in our tests that looks similar without the click events:

  <ion-list radio-group [(ngModel)]="relationship">
    <ion-radio value="friends">Friends</ion-radio>
    <ion-radio value="enemies">Enemies</ion-radio>
  </ion-list>

  <div padding>
    <code><b>relationship:</b> {{relationship}}</code>
  </div>

https://github.com/driftyco/ionic2/blob/master/ionic/components/radio/test/basic/main.html#L59-L66

For the initial post, @icarus_31 do you have it wrapped in a <ion-list radio-group> with a ngModel?

Either way, I was able to reproduce the problem. Just want as many details as possible. :smile:

Created an issue for this here: https://github.com/driftyco/ionic2/issues/829

1 Like
4

@brandyshea, I tried <ion-radio-group> and <ion-list radio-group> with same result. Though, for my test, I was not using ngModel.

5

Did somebody tried it lately and successfully make it work?

6

I think its broken, i cant even use it.
When some value is selected and i try to select another it wont update the selected value.
Is it happening to you?

7

I am sure too.

The check mark will always be set to the last item. Though, the item clicked is correctly set. So for now, I put a an item below the ion-radios to display the item selected just to confirm. So far, that solution is ok for me until they fix it. Still alpha, we have to deal with it. :wink:

8

@icarus_31 sorry man but i didn’t understand what u mean by item below the ion-radios, can u show me the code?
Thanks

1 Like
9

orderBy.html

<ion-content>
  <ion-list radio-group>
      <ion-radio value="orderBy1" (click)="selected('orderBy1')" [checked]="orderBy1">
          Order By 1
      </ion-radio>

     <ion-radio value="orderBy2" (click)="selected('orderBy2')">
         Order By 2
     </ion-radio>

     <ion-radio value="orderBy3" (click)="selected('orderBy3')">
        Order By 3
     </ion-radio>

  </ion-list>
  
  <ion-item>Order by: {{orderBy}}</ion-item>

</ion-content>

orderBy.ts

  selected(value: string) {
    this.orderBy = value;
  }
2 Likes
10

@rodrigoreal, another good alternative, if you don’t have too many items, is the ion-segment. This one is working.

11

@icarus_31 Thanks for sharing the code, i understand now what u mean by showing an item at the end, but i didn’t like much the visual.

But i liked that ion-segment idea, it should do the job.

12
13

@raulclaudino, can you provide an Ionic 2 version of it?

14

Try do it:

view:
< ion-radio ng-repeat=“user in userAnswers” ng-value=“user.answer” ng-model=“finalAnswer”>{{ user.text }}< /ion-radio>

controller:
$scope.userAnswers = [
{ text: “Backbone”, answer: “bb” },
{ text: “Angular”, answer: “ng” },
{ text: “Ember”, answer: “em” },
{ text: “Knockout”, answer: “ko” }
];
$scope.finalAnswer = ‘ng’;

I think the ionic 2 is something like:
export class MainCtrl{
constructor(){
this.userAnswers = [
{ text: “Backbone”, answer: “bb” },
{ text: “Angular”, answer: “ng” },
{ text: “Ember”, answer: “em” },
{ text: “Knockout”, answer: “ko” }
];

    this.finalAnswer = 'ng';
}

}

Ionic Demo: UI Components & API Customization to Create Interface
https://github.com/driftyco/ionic-site/tree/master/dist/preview-app/app/inputs/radio

15

You should give a try with the Ionic 2 version. I think it is still in development with some issue. Even the example in their doc does not work properly. Mine does not behave the same way though.

16

ion-radio is now fixed in alpah52!

17

Is it fixed? cool, now just lacks the docs to get fixed.

18

yeah, thanks to @raulclaudino for the links.

see here example

19

What about radio groups, how would it work, is the group defined by the ion-list?

20

Yes, radio group is handled by the ion-list.

Here a sample of my code:

file.html

  <form [ngFormModel]="_orderByForm">
    <ion-list radio-group ngControl="orderBy">
      <ion-radio value="id" [checked]="_orderBy=='id'">ID</ion-radio>
      <ion-radio value="address" [checked]="_orderBy=='address'">Address</ion-radio>
     <ion-radio value="name" [checked]="_orderBy=='name'">Name</ion-radio>
    </ion-list>
  </form>