Change radio button "checked" attribute from code


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-radio id="" (ionSelect)='showConfirmAlert(' [checked]="isLanguageSelected(" [value]=""></ion-radio>

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 :

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

	 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 !

(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.)

thanks @Sujan12, sorry for this !

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.


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-radio id="" (ionSelect)='showConfirmAlert('  [value]=""></ion-radio>

and then set value of selectedLanguage in my code ?

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

ok, it works !
My problem was because the value of ion-radio was binded on and not, 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()" >
    Choisissez la langue {{}} 
  <ion-item *ngFor="let language of languages">
    <ion-radio  id="" (click)='showConfirmAlert('  [value]=""></ion-radio>

Thanks so much @rapropos !

1 Like