How can I use ngModel on an ion radio element?

Question

I am trying to implement ngModel on an ion-radio element, but somehow this does not work. This is my code:

HTML

<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>

Javascript

import {Page} from 'ionic-angular';

@Page({
    templateUrl: 'build/pages/settings/settings.html'
})

export class Settings {
    constructor() {
        this.unit = 2;
    }
}

I tried to implement it on the ion input and ion selection, and it just works fine. I also tried adding directives: [FORM_DIRECTIVES]to my @Page and added the appropriate import, but this does not fix the problem.

Any ideas?

Answer 1

The syntax has been changed, rewritten now, ngModelshould be placed with ion-listand radio-grouponly once. No need to have them there for every item ion-radio.

<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>

ionic2