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

Question

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?

Answer 1

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

Answer 2

It's working with Ionic 5.

  <ion-radio-group value="answer">        <ion-item *ngFor="let item of question?.answers">            <ion-label> {{item.answer}} {{answer}}</ion-label>            <ion-radio slot="start" color="tertiary" value="{{item.id}}                   (ionBlur)="saveAnswer(item.id)">              </ion-radio>         </ion-item>    </ion-radio-group>