Angular生产构建报TS2322错误：number无法赋值给string求解决

问题根源 #

1. Angular中radio输入框的value属性默认是字符串类型，而你的表单控件初始值设为数字1，生产构建的严格类型检查触发了TS2322: Type 'number' is not assignable to type 'string'错误。
2. 手动绑定[checked]会与formControlName的自动状态管理逻辑冲突，导致修改value为字符串后单选框无法选中。

解决方案 #

方案一：统一使用字符串类型（推荐，最简洁） #

将表单控件和模板的数值类型统一为字符串，消除类型不匹配问题，同时让formControl自动管理选中状态。

1. 修改组件代码：

this.validationForm = new FormGroup({
  timeUnitHHMM: new FormControl('1'),
});

this.validationForm.get('timeUnitHHMM')?.valueChanges.subscribe(value => {
  if (value === '1') {
    this.validationForm.patchValue({timeUnitDecimal: '0'});
  }
});

2. 修改模板代码：
   移除手动绑定的[checked]，将[value]设为字符串'1'：

<label mdbLabel class="form-label mt-3 mb-0">Time Units </label>
<mdb-form-control>
  <div class="form-check form-check-inline">
    <input
      mdbRadio
      class="form-check-input"
      type="radio"
      mdbInput
      formControlName="timeUnitHHMM"
      id="timeUnitHHMM"
      [value]="'1'"
    />
    <label class="form-check-label" for="timeUnitHHMM">HHMM</label>
  </div>
</mdb-form-control>

方案二：保持数字类型，处理类型转换 #

如果业务逻辑必须使用数字类型，可以通过事件转换输入值：

1. 组件代码保持原有数字类型逻辑不变；
2. 修改模板代码：
   移除[checked]绑定，通过(change)事件将radio的字符串值转为数字：

<label mdbLabel class="form-label mt-3 mb-0">Time Units </label>
<mdb-form-control>
  <div class="form-check form-check-inline">
    <input
      mdbRadio
      class="form-check-input"
      type="radio"
      mdbInput
      formControlName="timeUnitHHMM"
      id="timeUnitHHMM"
      [value]="1"
      (change)="validationForm.get('timeUnitHHMM')?.setValue(parseInt($event.target.value, 10))"
    />
    <label class="form-check-label" for="timeUnitHHMM">HHMM</label>
  </div>
</mdb-form-control>

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