Numeric values in ion-radio values

Ionic Framework ionic-v3
1

I have the following in template and component code. I was anticipating that the timeoption value on the data instance would be updated with a numeric value that I provide to the value attribute of the ion-radio. I know in angular1 I’d need to use ngValue to ensure I would get values other than String, but I am not sure of the correct method here in angular2/ionic2

    <ion-list radio-group [(ngModel)]="data.timeoption">
        <ion-item *ngFor="let item of timeoptions">
            <ion-label>{{item.title}}</ion-label>
            <ion-radio value="{{item.value}}"></ion-radio>
        </ion-item>
    </ion-list>

And the component

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';



class Data {
  constructor(
  	public timeoption: number)
  {}

}

@Component({
  selector: 'page-page1',
  templateUrl: 'page1.html'
})
export class Page1 {

  timeoptions: any;
  data = new Data(30);

  constructor(public navCtrl: NavController,public userData: UserData) {

  	this.timeoptions = [
  		{
  			"title":"... in 30 minutes",
  			"value":30
  		},
  		{
  			"title":"... in 60 minutes",
  			"value":60
  		},
  		{
  			"title":"... in 90 minutes",
  			"value":90
  		},
  		{
  			"title":"... in 120 minutes",
  			"value":120
  		},
  	]

  }

}

I end up with string values being put into data.timeoption. I was expecting it to be a number.

2

I would like to know this as well. I’m trying to use a boolean value but it’s saving it as a string (“false” or “true”) instead of a boolean.

I tried writing value={{item.value}} and "{{item.value}}" but they both save the value as strings. I’ve also tried value=item.value and value='item.value' but they just end up setting value to the string “item.value”.

I’m sure it’s just a syntax thing but I can’t seem to find the correct way to write it anywhere.

3

I don’t know if you solved your problem, but i faced the same and couldn’t find anywhere in docs.
For boolean/numeric values, we can use [value].

Ex:

<ion-row radio-group [(ngModel)]=“myBoolean”>
<ion-radio [value]=“true”>

Source: typescript - Angular 2: ngModel binding for radio input of boolean type - Stack Overflow

2 Likes