为什么我不能用计算值更新 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);