Why I can't update the value of an Angular reactive form field with a calculated value?

Question

I am working on an Angular application using reactive form. Into the HTML code of a component I have this field that have to contains a value that is calculated when an operation is performed (changing another value in my frontend).

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

As you can see it show the value of the current_asset_value formControlName.

Then into the TypeScript code of this component I have defined the form into my ngOnInit() method:

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, []]
});

As you can see this field value is actually null and it is ok:

current_asset_value: [null, []],

Then, when the user perform an operation on this form (when the value of the invoice_cost or of the deductible fields changes) is performed this component method that set the value of the current_asset_value form field. I have done it in this way:

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

This method is correctly executed (I can see it using the dubugger and the console.log() output) but the set value is not updated in my fronted into the form. This is what I am obtaining:

As you can see when I change the value of the highligted form field the calculateAssetDepractionValue() method is performed and the actualValue is calculated, finnally it executed this line to set/update the value of the current_asset_value form field:

this.assetDetailsForm.value.current_asset_value = actualValue;

but as you can see in the print screen the value of the current_asset_value is not rendered into my view.

Why? What is wrong? What am I missing? How can I try to fix this issue?

Answer 1

Try using any of the below function approaches.

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

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