为什么我无法使用计算值更新 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, []]
});

正如你所看到的，这个字段值实际上是空的，没关系：

current_asset_value: [null, []],

然后，当用户在此表单上执行操作时（当 invoice_cost 或 deductible[=46= 的值] fields changes) 执行此组件方法，设置 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;
}

此方法已正确执行（我可以使用调试器和 console.log() 输出看到它）但设置值未在我的表单中更新。这是我得到的：

如您所见，当我更改突出显示的表单字段的值时，将执行 calculateAssetDepractionValue() 方法并且 actualValue 是经过计算，最后它执行了这一行 set/update current_asset_value 表单字段的值：

this.assetDetailsForm.value.current_asset_value = actualValue;

但是正如您在打印屏幕中看到的那样，current_asset_value 的值没有呈现在我的视图中。

为什么？怎么了？我错过了什么？我该如何解决这个问题？

Answer 1

尝试使用以下任何函数方法。

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

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