How to print values computed from variables in angular?

I have a FormGroupin a component like:

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)
  });

And in the html, I have the Input elements to accept the inputs for each of the five form-controls.

I’m just facing some trouble in outputting Amount to the html:

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

I’m getting errors:

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.

Can someone help me to understand whats going on?

>Solution :

Convert the variables to numbers.

Try this:

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

Or change type of your input to number:

<input type="number" formControlName="quantity">
<input type="number" formControlName="price">

And change your form:

quantity: new FormControl(null, Validators.required),
price: new FormControl(null, Validators.required),