Angular 8 update text field in response to another field change

Question

The image above represents a project I'm working on. Of the 3 fields, only purchase price data is manually entered. I use the following markup and TS code to set the Outstanding mortgage field to a percentage of the previously provided figure:

<input type="number" class="form-control" min='0' id="purchaseValueInput" formControlName="purchase_value" (ngModelChange)='setPercentages()'>

...

setPercentages() {
    this.mortgage = this.analysisForm.value.market.purchase_value * 0.75;
}

My challenge is I need to do a similar thing for the mortgage payments field but as a percentage of the outstanding mortgage value. Because that value is not manually provided the ngModelChange strategy is not working.

How can I resolve that last step?

Update

In my setPercentages() function, I have attempted to set a variable for mortgage payments but I get the following error:

The specified value "NaN" cannot be parsed, or is out of range.

I suspect it's because the field is regarded as empty even though visually it has data in it. I used the following code:

setPercentages() {
  this.mortgage = this.analysisForm.value.market.purchase_value * 0.75;

  this.mortgagePayments = (this.analysisForm.value.market.outstanding_mortgage * 0.03) / 12;
}

---

<input type="number" class="form-control" min='0' id="mortgagePaymentValueInput" formControlName="mortgage_payments" [value]="mortgagePayments">

Answer 1

I was assigning my percentage values to variables and interpolation to assign the variable as the value of my input field. That proved to the the wrong approach.

What does work is using form patchValue as shown below:

this.analysisForm.patchValue({
    market: {
        outstanding_mortgage: this.analysisForm.value.market.purchase_value * 0.75,
    }
});

Answer 2

You could try to bind the mortgage payments to a member variable and in the setPercentages function of the other input, you also update the model via that variable.

If ngModelChange doesn't work for some reason you can try to set the value attribute of that input: <input type="text" value="$300"></input>