If input type is set to Number how to set maxlength using sapui5

Question

I want to set validation in input field when type is set to Number and set maxlength using sapui5. But it is not working.

var Price = new sap.m.HBox({
    items:[new sap.m.Label({text:"Per Unit Price",required:true,design:"Bold",width:"110px"}),
    new sap.m.Input("Price",{ width:"150px",type:"Number",
          value:{
              type : 'sap.ui.model.type.Integer',
              constraints : {
                minLength: 1,
                maxLength: 15
           }
        }

    })]
});

Solution 1

Description of method setMaxLength of sap.m.Input from API:

This parameter is not compatible with the input type sap.m.InputType.Number. If the input type is set to Number, the maxLength value is ignored.

So it means you have to find other way how to do this. For example, when you use sap.m.InputType.Tel format instead, maxLength method works:

var oInput = new sap.m.Input("Price",{ 
      width:"150px",
      type:"Tel",
      minLength: 1,
      maxLength: 15 
});           
oInput.placeAt('content');

Here is interactive example.

EDITED 17:30 090117:

I edited previous posted code allowing to type just numbers as you wanted (Please, try here):

    var sNumber = "";
    var oInput = new sap.m.Input("Price",{ 
          width:"150px",                  
          minLength: 1,
          maxLength: 15,
          liveChange : function(oEvent){                    
                          var value = oEvent.getSource().getValue();
                          var bNotnumber = isNaN(value);
                          if(bNotnumber == false)sNumber = value;   
                          else oEvent.getSource().setValue(sNumber);                    
          },
         
    });           
    oInput.placeAt('content');

Solution 2

The API reference of setMaxLength says:

This parameter is not compatible with the input type sap.m.InputType.Number. If the input type is set to Number, the maxLength value is ignored.

So, remove the type of Input field and keep it default String and set min and max length:

// Input required from "sap/m/Input"
new Input({
  value: {
    path: "/value",
    type: "sap.ui.model.type.String",
    constraints: {
      maxLength: 2,
      minLength: 1
    }
  }
});

Above code does not allow me to enter more than 99 (2 digits).

In case Number type Input field is required. Below code will not allow me to successfully enter value more than 100.

new Input({
  type: "Number",
  value: {
    path: "/value",
    type: "sap.ui.model.type.Integer",
    constraints: {
      minimun: 0,
      maximum: 100
    }
  }
});

Comments

[Denis]

Below code for sap.m.Input with input type "Number" is not working anymore. I tested it on 1.71.30 version or higher. It is possible to enter infinite amount of digits

[bitski]

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

[Boghyon Hoffmann]

@Denis I just tested the above code snippets and they work well. Keep in mind that the above approach doesn't limit how many digits the user can actually enter, but it does prevent storing the new value to the model if the validation fails due to the exceeded constraints. The framework will then change the value state of the Input and display a message that the entered value is incorrect, if handleValidation is enabled.

[Admin]

Hello, i have edited my answer. Can you please check?

[Denis]

Hi Boghyon, sorry I am not working on Fiori anymore and cannot check what you proposed :(