Angular单选框值自动转为字符串，如何获取数字类型值？

这确实是Angular的默认行为——当你使用原生的[value]绑定数字到单选按钮时，表单控件会自动把值转换成字符串类型，因为HTML原生表单元素的value属性本质上都是字符串。不过有几种简单的办法能让你获取到数字类型的值，这里给你推荐最实用的几个方案：

方案1：用[ngValue]代替[value]（最简洁） #

Angular提供了[ngValue]指令，专门用来支持绑定非字符串类型的值到表单控件，它会帮你保留原始的数字类型。只需要把模板里的[value]改成[ngValue]就行：

<div class="col weekdays" *ngFor="let weekday of weekdays">
 <input formControlName="repeatEveryDay" name="repeatEveryDay" type="radio" 
        id="weekday-{{weekday.long | lowercase}}" 
        [ngValue]="weekday.day" 
        [checked]="weekday.day == repeatEveryDay" >
 <label for="weekday-{{weekday.long | lowercase}}">{{weekday.short | uppercase}}</label>
</div>

这样你的表单组中repeatEveryDay的值就会保持数字类型，不需要额外转换。

方案2：获取值时手动转换类型 #

如果不想修改模板，也可以在获取表单值的时候，把字符串转为数字：

// 使用Number()转换
const repeatDayNum = Number(this.yourFormGroup.get('repeatEveryDay').value);

// 或者用parseInt（记得加基数10）
const repeatDayNum = parseInt(this.yourFormGroup.get('repeatEveryDay').value, 10);

这个方法适合只需要在特定场景转换值的情况。

方案3：通过valueChanges实时转换 #

如果需要实时处理数字类型的值，可以订阅表单控件的valueChanges，并在管道中转换类型：

import { map } from 'rxjs/operators';

// 在组件初始化时添加
this.yourFormGroup.get('repeatEveryDay').valueChanges.pipe(
  map(value => Number(value))
).subscribe(numValue => {
  // 这里拿到的numValue就是数字类型了
  console.log('选中的星期ID（数字）：', numValue);
});

补充说明 #

为什么[value]会转成字符串？因为它直接绑定到HTML原生input的value属性，而原生HTML中所有表单元素的值都是字符串格式，Angular只是遵循了这个原生行为。而[ngValue]是Angular封装的指令，内部会处理值的类型保存，所以能支持数字、对象等非字符串类型。

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