Text Field Not Formatted in Currency When Selecting Currency Symbol from Dropdown List

Question

I've been repeatedly modifying a Salesforce LWC page which aims to format a text field into a currency format (with corresponding currency symbols, commas, and decimals). Displayed currency symbol depends on the selected value from Currency__c field.

Since I wanted to format the inputted text value when user leaves that input field, I used javascript's onblur event.

But upon leaving the input field, a Lightning error occurs, like the following:

Also, I checked the browser's console log, and it displays the value inputted from the text field. I am not sure what is wrong with my page. I even checked some tutorials if I got the correct event, and looks like onblur fits my requirement.

Meanwhile, below are the latest codes:

customDropDownLWC.js

//portion of js file

@wire(getPicklistValuesByRecordType, { objectApiName: CUSTOM_OBJECT, recordTypeId: '$objectInfo.data.defaultRecordTypeId'})
currencyPicklistValues({error, data}) {
    if(data) {
        this.error = null;
    
        let currencyOptions = [{label:'--None--', value:'--None--'}];
   
   
        data.picklistFieldValues.Currency__c.values.forEach(key => {
            currencyOptions.push({
                label : key.label,
                value: key.value
            })
        });

        this.currencyValues = currencyOptions;

    }

    else if(error) {
        this.error = JSON.stringify(error);
    }
}


handleCurrencyDropDownChange(event) {

    this.custObj.Currency__c = event.target.value;
    this.selectedCurrency = this.custObj.Currency__c;

}

handleTextFieldChange(event) {

    this.custObj.Text_Field__c = event.target.value;
    const currencySelected = this.custObj.Currency__c; 
    console.log('Currency Selected' + currencySelected);

    if(currencySelected === '$') {

        let formattedString;

        console.log('Text Field' + this.custObj.Text_Field__c);

        let valueInt = parseInt(this.custObj.Text_Field__c, 10);

        formattedString = '$' + valueInt.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, "$&,");
            
        console.log('Formatted Text Field' + formattedString);
            
    }

    //same goes with other currency symbols....

}

customDropDownLWC.html

<!--portion of html template-->

<lightning-combobox label="Currency" 
    name="Currency" 
    onchange={handleCurrencyDropDownChange} 
    options={currencyValues} 
    placeholder="--None--" 
    value={custObj.Currency__c}>
</lightning-combobox>

<lightning-input label="Text Field"
    type="text"
    value={formattedString}
    onblur={handleTextFieldChange}>
</lightning-input>

Answer 1

The toFixed() works only on the number, the Text_Field__c is of type text. You need to convert that to a number first. Use parseFloat().

Also, use let instead of var to create a block-scoped variable.

I have created a playground.