I have a custom form which automatically computes and displays the total of three fields. This is specifically an edit form wherein upon load, current value of the SummaryText__c field must be displayed. Its value, however, must change depending on field change of each fields: Number1__c, Number2__c , Number3__c.

Upon loading the form, current value for SummaryText__c does not have any value. But when I change values of Number1__c, Number2__c and , Number3__c, the current sum is reflecting.

As my initial solution, I used connectedCallback() to assign value on the initial display for SummaryText__c field. The value being assigned came from the getter method which fetches the current SummaryText__c value.

I was hoping that this would resolve my issue, but there's still no value displaying for SummaryText__c field on load of the custom form.

How can I fix this?

Here are the current codes I am working on:

customItemEditFormLWC.js

import { LightningElement, track, api, wire } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import SUMMARY_FIELD from '@salesforce/schema/CustomObj__c.SummaryText__c';

const fields = [SUMMARY_FIELD];

export default class customItemEditFormLWC extends LightningElement {
    @track summaryInt = 0;
    @track displaySum;
    

    @wire(getRecord, { recordId: '$recordId', fields })
    customRec;
    custSumInit
    num1Field = 0;
    num2Field = 0;
    num3Field = 0;

    connectedCallback() {
        this.displaySum = this.summaryInitialValue;
    }

    @api
    get summaryInitialValue() {
        this.custSumInit = getFieldValue(this.customRec.data, SUMMARY_FIELD)
        if(typeof this.custSumInit === "undefined")
        {
            this.custSumInit = '';
        }
        console.log('custSumInit value: ' + this.custSumInit);
        return this.custSumInit; 
    }

    handleNumber1Change(event) {
        this.num1Field = event.target.value;
        console.log('this.num1Field' + this.num1Field);
        this.computeSum();
        console.log('computeSum:' + this.computeSum());
    }

    handleNumber2Change(event) {
        this.num2Field = event.target.value;
        console.log('this.num2Field' + this.num2Field);
        this.computeSum();
        console.log('computeSum:' + this.computeSum());
    }

    handleNumber3Change(event) {
        this.num3Field = event.target.value;
        console.log('this.num3Field' + this.num3Field);
        this.computeSum();
        console.log('computeSum:' + this.computeSum());
    }

    computeSum() {                      
        this.summaryInt = (parseInt(this.num1Field) || 0) + (parseInt(this.num2Field) || 0) + (parseInt(this.num3Field) || 0)                                                         
        console.log('this.summaryInt' + this.summaryInt); 
        var summaryText = '';                                                 
        summaryText = this.summaryInt;
        if(this.summaryInt !== null) {
            this.displaySum = summaryText + ' ' + 'Item';
            console.log('this.displaySum' + this.displaySum);
        }                           
        else {
            this.displaySum = '0 Item'; 
        }
        this.customRec.SummaryText__c = this.displaySum;
        console.log('this.customRec.SummaryText__c' + this.customRec.SummaryText__c); 
        return this.summaryInt;
    }

}

customItemEditFormLWC.html

<template>   
    <lightning-record-edit-form object-api-name="CustomObj__c" record-id={recordId} onsuccess={handleSuccess}>
        <lightning-messages></lightning-messages>
        <div class="slds-grid slds-wrap"> 
            <div class="slds-col slds-size_2-of-2">     
                <lightning-input-field field-name="Number1__c" onchange={handleNumber1Change}>
                </lightning-input-field>
            </div> 
            <div class="slds-col slds-size_2-of-2">     
                <lightning-input-field field-name="Number2__c" onchange={handleNumber2Change}>
                </lightning-input-field>
            </div>  
            <div class="slds-col slds-size_2-of-2">     
                <lightning-input-field field-name="Number3__c" onchange={handleNumber3Change}>
                </lightning-input-field>
            </div>  
            <div class="slds-col slds-size_2-of-2">
                <label>Item Summary</label>
                <div>{displaySum}</div>
        </div> 
        </div>  
    </lightning-record-edit-form>  
</template>