Angular表单字段求和异常：数值拼接而非相加问题排查

问题根源：表单控件获取的value默认是字符串类型，直接使用+运算符时，会触发字符串拼接逻辑，而非预期的数值加法运算，导致输入2+2得到22而非4。

修复方案 #

需要先将表单控件的值转换为数值类型，再执行加法操作，以下是几种常用实现方式：

方式1：使用Number()转换

CalculateQty(i){
  let total = this.assetRevaluationForm.get('ItemRec') as FormArray;
  let formGroup = total.controls[i] as FormGroup;
  const netBookValue = Number(formGroup.get('netBookValue').value);
  const revaluedAmount = Number(formGroup.get('revaluedAmount').value);
  formGroup.get('NewDep').patchValue(netBookValue + revaluedAmount);   
}

方式2：使用parseFloat()转换（适合处理小数）

CalculateQty(i){
  let total = this.assetRevaluationForm.get('ItemRec') as FormArray;
  let formGroup = total.controls[i] as FormGroup;
  const netBookValue = parseFloat(formGroup.get('netBookValue').value);
  const revaluedAmount = parseFloat(formGroup.get('revaluedAmount').value);
  formGroup.get('NewDep').patchValue(netBookValue + revaluedAmount);   
}

方式3：使用+前缀快速转换

CalculateQty(i){
  let total = this.assetRevaluationForm.get('ItemRec') as FormArray;
  let formGroup = total.controls[i] as FormGroup;
  const netBookValue = +formGroup.get('netBookValue').value;
  const revaluedAmount = +formGroup.get('revaluedAmount').value;
  formGroup.get('NewDep').patchValue(netBookValue + revaluedAmount);   
}

额外优化建议 #

在模板中给输入框设置type="number"，同时在表单初始化时添加数值验证规则，从源头避免非数值输入，进一步降低类型错误概率：

<!-- 模板中input设置type -->
<input formControlName="netBookValue" type="number">
<input formControlName="revaluedAmount" type="number">

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