In one of my components, I have a FormGroup set up like this:
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)
});
Within the HTML file, I have input elements for each of the five form controls to accept user inputs.
However, I'm running into an issue when trying to display the calculated Amount in the HTML:
<p>Amount: {{ form.controls['quantity'] * form.controls['price']}}</p>
The errors I'm encountering are:
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.Could someone provide some guidance on what might be causing this issue?