Change radio button "checked" attribute from code

Ionic Framework ionic-v3
1

Hello

i am using Ionic 2.

I have a radio-group (to change language) :

<ion-list radio-group >
  <ion-item *ngFor="let language of languages">
    <ion-label>{{language.name}}</ion-label>
    <ion-radio id="language.id" (ionSelect)='showConfirmAlert(language.id)' [checked]="isLanguageSelected(language.id)" [value]="language.name"></ion-radio>
  </ion-item>
</ion-list>

On selecting item (click on radio button), item is automatically changed and checked. It works.

But i need to show an confirm alert, then, if user cancels, to cancel item selection and return to initial checked item.

The “checked” attribute is binded with my code :

isLanguageSelected(lang){
  let answer = (lang === this.actualLanguage) ? true : false;
  return answer;
}

 chooseLanguage(lang){
	 this.actualLanguage = lang;
	 this.appGlobals.set('actualLanguage', this.actualLanguage);
}

It works on first arrival on page, but if i launch again , for example to choose english :

this.chooseLanguage('en') ;

this.actualLanguage is well changed to “en” if i log it,
and this.isLanguageSelected('en'); returns true,
but “checked” value of en-item is not binded to it, and item is not updated.

Is there a way to update item checked attribute from code, and not only from click on radio button ?

thanks !

2

(I changed your post to format your code or error message correctly. Please use the </> button above the post input field to format your code or error message or wrap it in ``` (“code fences”) manually. This will make sure your text is readable and if it recognizes the programming language it also automatically adds code syntax highlighting. Thanks.)

3

thanks @Sujan12, sorry for this !

4

What I would do is to bind a property (say selectedLanguage) to the radio group with [(ngModel)] and get rid of isLanguageSelected(). Your confirmation dialog code can then manipulate selectedLanguage appropriately.

2 Likes
5

Thanks @rapropos, i will try it.

If i understand, you would do this :

<ion-list radio-group [(ngModel)]="selectedLanguage" >
  <ion-item *ngFor="let language of languages">
    <ion-label>{{language.name}}</ion-label>
    <ion-radio id="language.id" (ionSelect)='showConfirmAlert(language.id)'  [value]="language.name"></ion-radio>
  </ion-item>
</ion-list>

and then set value of selectedLanguage in my code ?

6

Basically, yes, although I think I would move the (ionSelect) on the options into an (ionChange) on the <ion-list>.

7

ok, it works !
My problem was because the value of ion-radio was binded on language.name and not language.id, while ion-list with [(ngModel)], which is binded on ion-item, take ion-item value as reference.

So with this code it works :

<ion-list radio-group [(ngModel)]="selectedLanguage" (ionChange)="onChange()" >
  <ion-list-header>
    Choisissez la langue {{actualLanguage.id}} 
  </ion-list-header>
  <ion-item *ngFor="let language of languages">
     <ion-label>{{language.name}}</ion-label>
    <ion-radio  id="language.id" (click)='showConfirmAlert(language.id)'  [value]="language.id"></ion-radio>
  </ion-item>
</ion-list>

Thanks so much @rapropos !

1 Like