从 v3 升级到 v4 后，带有 ngmodel 的离子收音机不起作用

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=选项 1 或选项 2。但是，它给出了初始值，即一个空字符串。

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

从 v3 升级到 v4 后，带有 ngmodel 的离子收音机不起作用

ion-radio with ngmodel doesn't work after upgrade from v3 to v4

forms

ionic4