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>

从v3升级到v4后，带有ngmodel的ion-radio无法正常工作

1 个答案: