0

I have a lightning:input field like this

<lightning:input aura:id="field1" label="Amount"
                         name="amount" type="number"
                         disabled="{!v.isReadOnlyForm}"
                         required="true"
                         step="0.01"/>

Its a number field and users generally enters big numbers like millions.

Once numbers are entered and we focus out of the field commas are added as thousand separators.

But its hard for users to write big numbers . They need to count zeroes while typing. Is there any way to add commas while typing into the field ?

3 Answers 3

2

As Sunil has said, you can use one more label to display the updated value using the "onchange" event.

However, If you chose to add commas to the lightning input field itself, you won't be able to use type="number" as it will not allow ',' character. You can use type="text" and then add commas to the number in the onchange event.

<lightning:input aura:id="field1" 
                         label="Amount"
                         name="amount"
                         type="text"
                         disabled="{!v.isReadOnlyForm}"
                         required="true"
                         value = "{! v.price }"
                         step="0.01"
                         onchange="{!c.addCommas}"/>

then onchange event:

({
    addCommas : function(component, event, helper){
            let updatedPrice = component.get("v.price").replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
            component.set("v.price", updatedPrice);
        }
})

The JavaScript part was explained in this answer.

1

As lightning input does not support this, you achieve this with one more label which is bind to value of input field and use updateOn="keyup" , so that user will see updated value instantly.

There is another way if you want to show without adding label use another input say input1 and bind value of this input to input1 and manage css with z-index and visibility, pointer events so that input1 will overlay to input and events occur on input.

<lightning:input aura:id="field1" label="Amount"
                         name="amount" type="number"
                         disabled="{!v.isReadOnlyForm}"
                         required="true"
                         step="0.01" value="{!v.myNumber}" updateOn="keyup" />

<ui:outputNumber value="{!v.myNumber}"/>
1
  • Thanks @Sunil . can you please provide an example ? Commented Aug 29, 2018 at 7:11
0

There is an attribute present in lightning:input called as formatter which you can use to format it as proper readable currency.

<lightning:input type="number" name="input7" label="Number field with currency formatter" value="123.45" 
formatter="currency" step="0.01"/>

enter image description here

Source: https://developer.salesforce.com/docs/component-library/bundle/lightning:input/example#lightningcomponentdemo:exampleInputNumber

You must log in to answer this question.

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