Question

149

How can I use a ngModel on an ion-radio element?

rated 0 times [ 151] [ 2] / answers: 1 / hits: 23472 / 8 Years ago, fri, march 18, 2016, 12:00:00

I'm trying to implement a ngModel on a ion-radio element but somehow it doesn't work. This is my code:

import {

  Page

} from 'ionic-angular';



@Page({

  templateUrl: 'build/pages/settings/settings.html'

})



export class Settings {

  constructor() {

    this.unit = 2;

  }

}

<ion-list radio-group>

  <ion-list-header>

    Unit

  </ion-list-header>



  <ion-item>

    <ion-label>Metric (kg)</ion-label>

    <ion-radio value=1 [(ngModel)]=unit></ion-radio>

  </ion-item>



  <ion-item>

    <ion-label>Imperial (lbs)</ion-label>

    <ion-radio value=2 [(ngModel)]=unit></ion-radio>

  </ion-item>

</ion-list>

I've tried implementing it on a ion-input and ion-select and that just works fine. I also tried adding directives: [FORM_DIRECTIVES] to my @Page and added the corresponding import but that doesn't fix the problem.

Any ideas?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

makaylahk

Add To Favorites

Follow

Total Points: 166

Total Questions: 94

Total Answers: 117

Location: Gabon

Member since Sat, Jul 25, 2020

4 Years ago

makaylahk questions

1 Electron store data locally without localstorage

Tue, Apr 26, 22, 00:00, 2 Years ago

1 Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response when using http get req from JS to SlackAPI

Mon, Feb 28, 22, 00:00, 2 Years ago

1 How do I use the useState hook to change the color of my react icons to blue?

Wed, Jul 21, 21, 00:00, 3 Years ago

1 Property 'selectionStart' does not exist on type 'EventTarget'

Fri, Mar 19, 21, 00:00, 3 Years ago

1 How can I pass multiple values in a single prop in react?

Sat, Feb 27, 21, 00:00, 3 Years ago

View All

answered 8 Years ago donovantyriqn · Accepted Answer

Syntax has been changed rewritten now, ngModel should be place with ion-list & radio-group only once. No need to have them there on each ion-radio element.

<ion-list radio-group [(ngModel)]=unit>

    <ion-list-header>

        Unit

    </ion-list-header>



    <ion-item>

        <ion-label>Metric (kg)</ion-label>

        <ion-radio value=1></ion-radio>

    </ion-item>



    <ion-item>

        <ion-label>Imperial (lbs)</ion-label>

        <ion-radio value=2 ></ion-radio>

    </ion-item>

</ion-list>

For more information you could visit ionic2 framework forum link