Ionic中radio-group绑定[(ngModel)]后[checked]默认选中失效及移位ngModel报错

• Ionic的radio-group采用集中式状态管理逻辑：只要该组件绑定了ngModel，整个单选组的选中状态完全由绑定的模型值驱动，模板上单独给ion-radio设置的[checked]="true"会被组件内部的状态同步逻辑直接覆盖，完全不生效，最终就会出现无任何默认选中项的渲染结果。
• 尝试把ngModel挪到内部ion-radio、ion-item标签上时触发的No value accessor for form control with unspecified name attribute报错，是因为这两类组件本身没有实现Angular表单要求的ControlValueAccessor接口，Angular表单系统找不到对应的值访问适配逻辑，这种写法本身就不符合Ionic组件的适配规范。

• 移除单个ion-radio标签上冗余的[checked]="true"属性，该属性在绑定了ngModel的单选组场景下无实际作用。
• 检查所有ion-radio的value属性值的前后空格，原代码里value= "metric"的写法会在value值前带一个空格，和组件类里初始化的不带空格的'metric'值不匹配，就算同步了状态也无法正确选中对应单选按钮，需要把value值两侧的空格清理干净。
• 将默认选中逻辑从模板层的checked属性，迁移到组件类的模型初始化阶段：如果需要默认选中Metric选项，就把绑定的units变量在组件类中初始化为和对应单选按钮value完全一致的值，radio-group会自动匹配值并同步选中状态。
• 必须将ngModel绑定在radio-group标签本身上，不要下移到内部子元素，避免触发值访问器报错。

修正后代码示例 #

组件类（.ts文件） #

// 页面组件类内定义，直接初始化默认选中值
units: string = 'metric';

模板文件（.html文件） #

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

补充说明：如果使用Ionic响应式表单开发，同样需要把formControl直接绑定在radio-group上，控件的初始选中值在FormControl实例化时设置即可，不要将表单控制绑定到内部的单个单选元素上。

内容的提问来源于stack exchange，提问作者dancingbush