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. – rahul gawale Jul 9 '20 at 12:43
  • What do you mean not to change the original value? – Ertyq Jul 9 '20 at 15:04
  • You are replacing the value in the input box on blur – rahul gawale Jul 9 '20 at 15:18
  • I already used custObj.Text_Field__c in the input box on blur, but same error occurs. – Ertyq Jul 9 '20 at 16:29
  • have you tried adding console logs? the primary reason for this error is the null pointer. – rahul gawale Jul 9 '20 at 16:33
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 '20 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 '20 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 – rahul gawale Jul 9 '20 at 18:54
  • 1
    @Ertyq check updated playground – rahul gawale Jul 10 '20 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 '20 at 8:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.