How to print values computed from variables in angular?-CodePudding

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?

CodePudding user response：

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),