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
           }
        }

    })]
});

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
           }
        }

    })]
});

• javascript
• sapui5

4 Answers 4

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

This parameter is not patible 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');

The API reference of setMaxLength says:

This parameter is not patible 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
    }
  }
});

If you use in the xml view the type 'Number', then it will not take in consideration the 'maxLength' property anymore. So you have to add in the 'liveChange' event of the Input control a function that will do the validation on each change of character.

        onChangeCheckLength4: function (oEvent) {
        if (oEvent.getSource().getValue().length > 4) {
            oEvent.getSource().setValue(oEvent.getSource().getValue().slice(0, -1))
        }
    },

     <Input id="test"
                type="Number"
                liveChange="onChangeCheckLength4"
                value=""/>

try this on XML in the liveChange event of a Input (liveChange="_typeNumber")

On Controller:

    _typeNumber: function(oEvent) {
        var value = oEvent.getSource().getValue();
        var bNotnumber = isNaN(value);
        if (bNotnumber === true) {
            oEvent.getSource().setValue(value.substring(0, value.length - 1));
        }
    }