3

I want the input field to only allow numbers and the number can start with 0 also. I tried using ui:inputNumber but when i click on check button for validation of input it deletes the 0 from start. Here is my code:

<ui:inputNumber class="slds-input slds-text-body_regular fnn-text" value="{!fnn.Name}" required="true" maxlength="10" format="########"/>

Early answers would be great! accept number only which can start with 0.

3 Answers 3

5

Short answer: numbers "cannot" start with 0. Entering something with leading zeros is a valid syntax but these will not be saved.

Detailed answer: any input field of type number (be it HTML or Lightning) will use a numeric JS type to save the data. This will strip the leading zeros.

If you need leading zeros then, what you are saving is not a number but some sort part number or a phone number. You should use a string type.

To do so, use a text input with a pattern that only allows numbers like so:

<lightning:input type="text" label="Numeric value" aura:id="myInput" name="myInput" pattern="[0-9]*"/>

This will display an error message if the user tries to enter non-numeric characters. You can check if the field is valid at any time by calling:

var validity = cmp.find("myInput").get("v.validity");
console.log(validity.valid);

General comment for all involved in this question: do not use ui:inputNumber (to be deprecated) please use lightning:input instead.

1
  • Loved that regex part you did -> pattern="[0-9]*
    – compski
    Commented Dec 17, 2019 at 9:20
0

You can an Input field and set its min attribute to zero as follows:

<input type="number" min="0">

otherwise, check the ui:inputNumber's documentation for available attributes. min doesn't seem to be available.

the rendered html for ui:inputNumber should resemble something like this:

<div class="uiInput uiInputNumber uiInput--default uiInput--input">
<label class="uiLabel-left form-element__label uiLabel">
    <span>Age</span>
</label>
<input max="99999999999999" step="1" type="text" 
        min="-99999999999999" class="input">
</div>

as per the documentation.

6
  • but when i use this <input type="number" class="slds-input slds-text-body_regular fnn-text" value="{!fnn.Name}" required="true" maxlength="10" min="0"/> it doesnt save my value in fnn.Name and when i check in js the value is blank Commented Jul 6, 2017 at 12:11
  • update your question with the rest of your code, however, you should address this in a different post
    – glls
    Commented Jul 6, 2017 at 12:20
  • No But the value is not getting passed to fnn.Name when i use <input> Commented Jul 6, 2017 at 12:22
  • that is an issue with your code, not the field or input tag
    – glls
    Commented Jul 6, 2017 at 12:22
  • otherwise, you will want to validate the field value with client side logic in your controller
    – glls
    Commented Jul 6, 2017 at 12:24
0

I don't think it's possible through the ui:inputnumber as ui:inputnumber change the value 0345 to it's absolute value 365.

You can use the below workaround through.

You can use a ui:inputText to fetch the value from UI and then use a javascript function to check if it's a numeric value. If it's not a numeric value set your input txt to blank or the previous value.

<aura:attribute name="input" type="String" default="34" />
<ui:inputText value="{!v.input}" change="{!c.checkIfNotNumber}"/>

JS controller to check for numeric input:

checkIfNotNumber : function(component, event, helper) {
        if(isNaN(component.get("v.input"))){
            component.set("v.input","");
        }
    }

You must log in to answer this question.

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