ion radio button not getting selected?

1
votes

I have a string like this

values="value1~Display Value 1\nvalue2~Display Vaue 2"

And I need to display this string as radio button options in ionic for that I am converting this string to array like this

getItems() {
    let newValues = [];
    let arr = this.values.split("\n");
    for (let i = 0; i < arr.length; i++) {
        let keyValues = arr[i].split("~")
        newValues.push({
            "value": keyValues[0],
            "displayValue": keyValues[1]
        })
    }
    return newValues;
}

My html template looks like this

<form [formGroup]="formGroup">
    <ion-list radio-group formControlName="radioButton">
        <ion-item *ngFor="let item of getItems()">
            <ion-label>{{item.displayValue}}</ion-label>

            <ion-radio [value]="item.value"></ion-radio>
        </ion-item>

    </ion-list>
</form>

So when I use function binding with *ngFor, the radio button is not getting selected but if I use normal array in *ngFor everything works perfectly.

I have reproduced the problem here stackblitz.

Can anyone help??

3
angularionic-frameworkionic2
It works fine for me stackblitz.com/edit/ionic-b7b1be?file=pages%2Fhome%2Fhome.ts - Tan Duong
i am getting these strings from server dynamically and creating form dynamically , there can be moer than one string.. so converting into array inside oninit method is not an option for me. - arshid dar
So you want to convert this in view? - Tan Duong
yes, that is what i am trying to do by calling getitems method.. note that if i replace radio button with select it works fine.. - arshid dar

3 Answers

0
votes

This should do the trick

getItems() {
 return this.values
    .split('\n')
    .map(v => v.split('~'))
    .map(([value, displayValue]) => ({ value, displayValue }))
}

Live demo

0
votes

I think this is something you are looking for

getItems(){
  let newValues=[];
  let arr= this.values.split("\n");
 console.log(this.formGroup);
 for(let i=0;i<arr.length;i++){
  let keyValues= arr[i].split("~");
  let isCheck = false;
  if (this.formGroup.value.radioButton === keyValues[0]) {
    isCheck = true;
  }
  newValues.push({"value":keyValues[0], "displayValue": keyValues[1], isCheck})
 }

https://stackblitz.com/edit/ionic-b7b1be?file=pages%2Fhome%2Fhome.ts

Or you can just modify the view 

<ion-radio [checked]="formGroup.value.radioButton === item.value" [value]="item.value"  ></ion-radio>

https://stackblitz.com/edit/ionic-kbq769?file=pages%2Fhome%2Fhome.html

0
votes

I know this question is already answered but I have one solution for this same.

I have created a demo on stackblitz. I hope this will help/guide to you/others.

CODE SNIPPET 

getItems() {
        let newValues = [];
        let arr = this.values.split("\n");
        for (let i = 0; i < arr.length; i++) {
            let keyValues = arr[i].split("~");
            let checked = false;
            if (this.formGroup.get('radioButton').value === keyValues[0]) {
                checked = true;
            }
            newValues.push({ "value": keyValues[0], "displayValue": keyValues[1], checkedRadio: checked })
        }        getItems() {
        let newValues = [];
        let arr = this.values.split("\n");
        for (let i = 0; i < arr.length; i++) {
            let keyValues = arr[i].split("~");
            let checked = false;
            if (this.formGroup.get('radioButton').value === keyValues[0]) {
                checked = true;
            }
            newValues.push({ "value": keyValues[0], "displayValue": keyValues[1], checkedRadio: checked })
        }
        return newValues;
  }