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

问题:

I'm trying to implement a ngModel on a ion-radio element but somehow it doesn't 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'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?

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

回答2:

This worked for me on Ionic 5

</ion-list-header>

  <ion-item>
    <ion-label>
        <ion-icon name="radio-button-off"></ion-icon>
        Circle
        </ion-label>

    <ion-radio value="1" ></ion-radio>
  </ion-item>
  <ion-item>
    <ion-label>
        <ion-icon name="square-outline"></ion-icon>
        Square
    </ion-label>
    <ion-radio value="2"></ion-radio>
  </ion-item>
  <ion-item>
    <ion-label>
        <ion-icon name="play"></ion-icon>
        Triangle
    </ion-label>
    <ion-radio value="3" ></ion-radio>
  </ion-item>
</ion-radio-group>