时间戳

首页 > 解决方案 > 被 ngModel 覆盖的单选按钮选中

angular - 被 ngModel 覆盖的单选按钮选中

问题描述

向单选组声明 ngModel 时，它似乎覆盖了由 [checked]="true" 分配的默认单选按钮选择

     <!--Radio buttons for units-->
      <ion-list-header style="color: white">
        Units
      </ion-list-header>
   <ion-list radio-group [(ngModel)]="units">
   
    <ion-item>
      <ion-label>Metric</ion-label>
      <ion-radio [checked]="true"  value= "metric"></ion-radio>
    </ion-item>
    <ion-item>
      <ion-label>Imperial</ion-label>
      <ion-radio value="imperial"></ion-radio>
    </ion-item>
  </ion-list>

因此，当按钮组在视图中时，默认情况下没有选中按钮。

我尝试将 ngModel 放置在单选按钮标记中，即 ion-item 标记中，这两种方法都会引发异常：

未捕获的错误：未捕获（承诺）：错误：没有用于具有未指定名称属性的表单控件的值访问器 _throwError@http://localhost:8100/build/vendor.js:27548:20

任何输入表示赞赏。

标签： angularionic3radio-buttonangular-ngmodel

解决方案

由于您将单选组绑定到该units属性，因此您不需要checked在模板中使用该属性。

为了默认选择其中一个选项，您只需将该选项的值分配给units属性：

private someFunction(): void {
  // ...
  this.units = 'metric'; 
}

<!--Radio buttons for units-->
<ion-list-header style="color: white">
  Units
</ion-list-header>
<ion-list radio-group [(ngModel)]="units">
  <ion-item>
    <ion-label>Metric</ion-label>
    <ion-radio value= "metric"></ion-radio>
    </ion-item>
  <ion-item>
    <ion-label>Imperial</ion-label>
    <ion-radio value="imperial"></ion-radio>
  </ion-item>
</ion-list>

推荐阅读