How to use constrains property for Input in UI5?

Question

I'm trying to restrict the user to enter only numbers. Maybe I can do this using regular expression but I don't know the exact syntax. I don't want decimal or special characters.

<Input type="Number"
value="{
    type : 'sap.ui.model.type.Number',
    constraints : {
        minLength: 1,
        maxLength: 15,
        validate: ...
    }
}" />

Answer 1

The sap.ui.model.type.Number doesn't exist, but Integer and Float do.

<Input 
    type="Number"
    value="{
        path: '/number',
        type: 'sap.ui.model.type.Integer',
        formatOptions: {
            groupingEnabled: false,
            groupingSeparator: ',',
            decimalSeparator: '.'
        },
        constraints : {
            minimum: '0',
            maximum: '99'
        }
}" />

I think the integer type is just what you need. Only integer numbers are valid and by default there is no grouping, decimals or other characters. You could use SAPUI5's error handling capabilities to alert the user if an invalid entry has been entered.

If you want to prevent invalid characters to be even entered, you could use the masked input control. Eg:

<MaskInput 
    mask = "999999" 
    placeholderSymbol = "_" 
    placeholder = "Enter a six digit number"/>

However, personally I find them a bit ugly for regular number. The mask input control is actually meant for input values that follow a certain pattern such as credit card number or postal codes.

Answer 2

The very <Input type="Number" accepts nothing but numbers however if you still want to implement your own validation you can do as follow the below regex used to consider only numbers:

Define regex :

regex = /^[0-9]*$/;

Add liveChange to your input

    liveChange: function(oEvent){
        if(oEvent.getParameter("liveValue") === "" 
                  || !oEvent.getParameter("liveValue").match(regex)){
                this.setValueState(sap.ui.core.ValueState.Error);
   }
    else{
               this.setValueState(sap.ui.core.ValueState.Success);
    }
   }

Answer 3

If you restrict the input type to Number , no (special) characters are allowed to enter into the input field. However, number related characters ( .,- ) are allowed. To get rid of it, you can set the data type of your property binding to sap.ui.model.type.Integer . You can also set the minLength , maxLength etc. constraints. If user types in 2.1 , a validation error will be thrown and the input field value state will be set to Error.

<Input type="Number"
   value="{
      type : 'sap.ui.model.type.Integer',
      constraints : {
          minLength: 1,
          maxLength: 15
   }
}" />

Documentation of the Integer type.

Here is an other example for field validation with MessageManager