為什么我不能用計算值更新 Angular 反應式表單字段的值？

Question

我正在使用反應形式開發 Angular 應用程序。 在組件的 HTML 代碼中，我有這個字段必須包含一個在執行操作時計算的值（在我的前端更改另一個值）。

<div class="row">
  <div class="col-2">
    <p>Valore attuale asset</p>
  </div>
  <div class="col-10">
    <p-inputNumber id="deductible" formControlName="current_asset_value"
                   mode="currency" currency="EUR" locale="de-DE"
                   [disabled]="true"> 
    </p-inputNumber>                         
  </div>
</div>

如您所見，它顯示了current_asset_value formControlName 的值。

然后進入這個組件的 TypeScript 代碼，我在我的ngOnInit()方法中定義了表單：

this.assetDetailsForm = this.fb.group({
    asset_type: [this.assetDetailsSelected.asset_type, [Validators.required]],
    asset_model: [this.assetDetailsSelected.asset_model, [Validators.required]],
    guarantee_start_date: [this.assetDetailsSelected.guarantee_start_date, []],
    guarantee_duration: [2, []],
    guarantee_end_date: [null, []],
    asset_action: [this.assetDetailsSelected.asset_action, []],
    allocation: [null, []],
    asset_features: [this.assetDetailsSelected.asset_features, [Validators.required]],
    serial_number: [this.assetDetailsSelected.serial_number, [Validators.required]],
    accessories: [this.assetDetailsSelected.accessories, [Validators.required]],
    allocation_date: [this.assetDetailsSelected.allocation_date, [Validators.required]],
    company: [this.assetDetailsSelected.company, [Validators.required]],
    notes: [this.assetDetailsSelected.notes, [Validators.required]],
    invoice: [this.assetDetailsSelected.invoice, [Validators.required]],
    invoice_cost: [this.assetDetailsSelected.invoice_cost, [Validators.required]],
    deductible: [this.assetDetailsSelected.deductible, [Validators.required]],
    current_asset_value: [null, []],
    status: [this.assetDetailsSelected.status, []]
});

如您所見，該字段值實際上是 null 並且可以：

current_asset_value: [null, []],

然后，當用戶在此表單上執行操作時（當invoice_cost或deductible字段的值發生變化時），執行設置current_asset_value表單字段值的組件方法。 我是這樣做的：

public calculateAssetDepractionValue() {
    let today:Date =  new Date();
    console.log("TODAY DATE: ", today);
    console.log("GUARANTEE START DATE: ", this.assetDetailsSelected.guarantee_start_date);

    let monthsFromPurchase:number =  this.monthDiff(today, this.assetDetailsSelected.guarantee_start_date);
    console.log("monthsFromPurchase: " + monthsFromPurchase);

    let monthlyDevaluation = (this.assetDetailsSelected.invoice_cost - this.deductibleNg) / 36;
    let actualValue = this.assetDetailsSelected.invoice_cost - (monthlyDevaluation * monthsFromPurchase);

    console.log("actualValue: " + actualValue);

    this.assetDetailsForm.value.current_asset_value = actualValue;
}

此方法已正確執行（我可以使用 dubugger 和 console.log() 輸出看到它）但設置值未在我的表單中更新。 這就是我得到的：

正如您所看到的，當我更改 highligted 表單字段的值時，執行了calculateAssetDepractionValue()方法並計算了actualValue ，最后它執行了這一行來設置/更新current_asset_value表單字段的值：

this.assetDetailsForm.value.current_asset_value = actualValue;

但正如您在打印屏幕中看到的那樣， current_asset_value的值並未呈現到我的視圖中。

為什么？ 怎么了？ 我錯過了什么？ 我該如何嘗試解決此問題？

Answer 1

嘗試使用以下任何 function 方法。

this.assetDetailsForm.get('current_asset_value').setValue(actualValue);

this.assetDetailsForm.controls.current_asset_value.setValue(actualValue);