Angular 7：单选按钮应使用ngModel还是change事件函数？

我来帮你搞定这个单选按钮的绑定问题～先梳理下你之前代码里的小问题，再给你两种简单有效的解决办法：

问题根源 #

你当前的代码存在几个导致值获取失败的问题：

1. 单选按钮没设置明确的value属性，没法精准区分选中的是Yes还是No
2. 两个按钮绑定了不同的事件处理函数（onchangeDia和onSaveDiabetes），逻辑分散容易出错
3. 事件参数传递有误（dia?.checked里的dia没有正确关联到DOM元素，导致val为null）
4. 可能没初始化info.bDia的初始值，双向绑定无法正常生效

解决方案1：双向数据绑定（最简洁） #

Angular的[(ngModel)]可以直接帮你完成单选按钮和变量的双向绑定，不用手动写事件处理逻辑：

模板代码

<label>Yes</label>
<input type="radio" name="dia" value="true" [(ngModel)]="info.bDia" />
&nbsp;
<label>No</label>
<input type="radio" name="dia" value="false" [(ngModel)]="info.bDia" />

组件代码

先确保你的info对象有初始值（在组件类里初始化）：

// 组件类内
info = { bDia: false }; // 初始设为false，对应默认选中No

这样选Yes时info.bDia会自动变为true，选No时自动变为false，完全不用额外写事件函数～

解决方案2：手动处理change事件（适合需要额外逻辑的场景） #

如果选中时需要执行保存等额外操作，可以手动绑定change事件，正确获取选中值：

模板代码

<label>Yes</label>
<input type="radio" name="dia" [value]="true" [checked]="info.bDia" (change)="onDiaChange($event)" />
&nbsp;
<label>No</label>
<input type="radio" name="dia" [value]="false" [checked]="!info.bDia" (change)="onDiaChange($event)" />

组件代码

// 组件类内
info = { bDia: false };

onDiaChange(event: Event) {
  const selectedRadio = event.target as HTMLInputElement;
  // 把字符串值转换为boolean类型
  this.info.bDia = selectedRadio.value === 'true';
  // 这里可以添加额外逻辑，比如调用保存接口
  // this.saveDiabetes();
}

关键注意事项 #

• 两个单选按钮的name属性必须完全一致，浏览器才会把它们识别为同一组（只能选一个）
• 必须给每个单选按钮设置value，否则无法区分选中项
• 一定要初始化info.bDia的初始值，页面加载时对应的单选按钮才会默认选中

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