Angular 8 更新文本字段以响应另一个字段更改

Question

上图代表我正在进行的一个项目。在这 3 个字段中，只有 购买价格 数据是手动输入的。我使用以下标记和 TS 代码将 Outstanding mortgage 字段设置为先前提供的数字的百分比：

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

我的挑战是我需要对 抵押付款 字段做类似的事情，但作为未偿还抵押价值的百分比。因为该值不是手动提供的，所以 ngModelChange 策略不起作用。

我该如何解决最后一步？

更新

在我的 setPercentages() 函数中，我试图为抵押付款设置一个变量，但出现以下错误：

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

我怀疑这是因为该字段被认为是空的，即使在视觉上它有数据。我使用了以下代码：

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

您可以尝试将抵押付款绑定到一个成员变量，并在另一个输入的 setPercentages 函数中，您也可以通过该变量更新模型。

如果 ngModelChange 由于某种原因不起作用，您可以尝试设置该输入的值属性： <input type="text" value="0"></input>

Answer 2

我正在将我的百分比值分配给变量和插值以将变量分配为我的输入字段的值。事实证明这是错误的做法。

有效的是使用如下所示的 patchValue 形式：

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

Angular 8 更新文本字段以响应另一个字段更改

Angular 8 update text field in response to another field change

angular-ngmodelchange

angular8

更新