ion-радио с ngmodel не работает после обновления с v3 до v4

Question

Я пытаюсь обновить имеющийся у меня проект с ionic v3 на ionic v4.Однако у меня есть проблема с шаблонами, управляемыми формами.У меня есть следующее:

<ion-list [class]="myradio.isValidClass" radio-group [(ngModel)]="myradio.value" ngDefaultControl>
<ion-radio-group>
  <ion-item>
    <ion-label>Option1</ion-label>
    <ion-radio value="option1" [disabled]="myradio.disable"></ion-radio>
  </ion-item>
  <ion-item>
    <ion-label>Option2</ion-label>
    <ion-radio value="option2" [disabled]="myradio.disable"></ion-radio>
  </ion-item>
    </ion-radio-group>
  </ion-list>
<button (click)="submit()">Submit</button>

и в соответствующем файле ts:

@Component({
  selector: 'mycomponent',
  templateUrl: './mycomponent.component.html',
  styleUrls: ['./mycomponent.component.scss'],
})
export class MyComponent  {

  private myradio = {
    value: '',
    disable: false,
    isValidClass: 'ng-valid'
  }

  constructor() {
  }

  submit() {
    console.log(this.myradio);
  }
}

Что я ожидал после того, как выбрал радио и отправляю, это дать мне console.log(this.myradio)значение, например this.myradio.value = option1 или option2.Однако, это дает начальное значение, то есть пустую строку.

В ionic v3 все работало как положено ... что мне не хватает?

Answer 1

поместите ngModel в тег ion-radio-group.Тег ion-list не поддерживает ngModel, поэтому выбранное значение не привязано к модели

<ion-list [class]="myradio.isValidClass" radio-group>
<ion-radio-group [(ngModel)]="myradio.value">
  <ion-item>
    <ion-label>Option1</ion-label>
    <ion-radio value="option1" [disabled]="myradio.disable"></ion-radio>
  </ion-item>
  <ion-item>
    <ion-label>Option2</ion-label>
    <ion-radio value="option2" [disabled]="myradio.disable"></ion-radio>
  </ion-item>
    </ion-radio-group>
  </ion-list>