sapui5 - How can I add validation to an Input field?

Question

Just learning SAP UI5, I have a simple input field like so:

app.xml

<Input
    placeholder="Please enter 10 digit number"
    value=""
/Input>

I'm trying to understand how I can add a validation on the input field that does the following:

-Accepts a number of 10 digits or more

So far, what I understand, this can be setup in the following way:

<Input value=”{

    path : ‘/userName’,
    type : ‘sap.ui.model.type.Integer’,
    constraints : {
        minLength : 10
    }
}

Where I'm getting confused:

The input field is meant to act as a search bar, therefore I don't need to introduce databinding (search bar should not have an initial value) where I have to configure a path. Can someone explain to me how I can add validation without setting a 'Path'?

Answer 1

If you check the documentation for Input, you'll see that the control has the event liveChange. Furthermore, you can also use the validators to give immediate feedback to the users.

Let's see an example.

View:

<Input liveChange = "onLiveChange" />

Controller:

onLiveChange(oEvent) {
    let newValue = oEvent.getParameter("newValue");

    //you can also use None, or just remove this line
    this.setValueState(sap.ui.core.ValueState.Success); 

    if(/* your error condition */)
        this.setValueState(sap.ui.core.ValueState.Error);
    }
}

When "your condition" is true, the whole input will change its border.

Anyway, if you want to use a model, you could try to create a local JSON-model, and try to bind it to the input with the constraint. But in this case, I would just go with the first solution.