0

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:

enter image description here

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>
6
  • Try this, I think it is better not to change the original value. Jul 9, 2020 at 12:43
  • What do you mean not to change the original value?
    – Ertyq
    Jul 9, 2020 at 15:04
  • You are replacing the value in the input box on blur Jul 9, 2020 at 15:18
  • I already used custObj.Text_Field__c in the input box on blur, but same error occurs.
    – Ertyq
    Jul 9, 2020 at 16:29
  • have you tried adding console logs? the primary reason for this error is the null pointer. Jul 9, 2020 at 16:33

1 Answer 1

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.

8
  • Regarding the conversion, I converted Text_Field__c to number using parseInt (for now) before using it with toFixed(). Also used let instead of var. But there's a weird thing going on, when I checked the console log, it displays the expected format Formatted Text Field$500.00 but when I check the UI and leave the input field, it just displays 500. I even tried using either formattedString or custObj.Text_Field__c for the input field value . but nothing works.
    – Ertyq
    Jul 9, 2020 at 18:41
  • As for the input field type, I use text as I also needed to append the currency symbol I selected from the dropdown list. Number type does the trick for the comma, but I think it won't work if I will add the currency symbol.
    – Ertyq
    Jul 9, 2020 at 18:43
  • 1
    Ohh yeah, you can use type text then.. I didn't realize that you can't show symbol in number type input, ihave updated my answer Jul 9, 2020 at 18:54
  • 1
    @Ertyq check updated playground Jul 10, 2020 at 6:58
  • 1
    I followed your approach from your playground, and finally, after multiple modifications, it works!! Thank you very much for all your help and effort :))
    – Ertyq
    Jul 10, 2020 at 8:10

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .