Angular中如何输出变量计算值？表单控件运算报错求助

问题背景 #

组件中定义的FormGroup：

form: FormGroup = new FormGroup({
    $key: new FormControl(null),
    from: new FormControl('', Validators.required),
    to: new FormControl('', Validators.required),
    quantity: new FormControl('', [Validators.required, Validators.pattern('[0-9]*')]),
    price: new FormControl('', [Validators.required, Validators.pattern('[0-9]*')]),
    ticker: new FormControl('', Validators.required)
  });

HTML中尝试计算金额的代码：

<p>Amount: {{ form.controls['quantity'] * form.controls['price']}}</p>

触发的错误：

The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.
The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.

核心原因 #

1. 操作对象类型错误：form.controls['quantity'] 和 form.controls['price'] 返回的是FormControl实例对象，并非控件的实际输入值。TypeScript不允许对对象执行算术运算，因此抛出类型不匹配错误。
2. 值的类型问题：即使获取到值，控件初始值是空字符串''，字符串类型无法直接参与乘法运算，会导致逻辑错误或额外类型问题。

修复方案 #

必须通过value属性获取控件的实际值，并转换为数值类型后再运算：

<!-- 基础写法，利用+号快速转数值 -->
<p>Amount: {{ +form.controls['quantity'].value * +form.controls['price'].value }}</p>

如果需要处理空值（避免NaN），可以添加默认值：

<!-- 安全写法，空值时用0替代 -->
<p>Amount: {{ 
  (form.controls['quantity'].value ? +form.controls['quantity'].value : 0) * 
  (form.controls['price'].value ? +form.controls['price'].value : 0) 
}}</p>

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