CODEWITHSUNDEEP
javascriptsapui5
Kunal
Kunal

Reputation: 67

Setting TextField Value State in "sap.ui.model.SimpleType.extend"

I am trying to add validation for time using regular expression for a column inside my table. First I have added a column,please find the code below:

oTableFileContents.addColumn(
    new sap.ui.table.Column("Time")
    .setTemplate(
        new sap.ui.commons.TextField({
            editable:true, 
            valueState : sap.ui.core.ValueState.Error, 
            tooltip:""
        })
        .bindProperty("value","Time",new sap.myproject.Time())
    )
    .setLabel(
        new sap.ui.commons.Label({
            text : "Time"
        })
    )
);

Here, by default I am setting ValueState of each TextField to "Error" so that each blank entry is in error state. And while assigning model I have to set each valid entry to "Success". For that I am defined my extended class as :

sap.ui.model.SimpleType.extend("sap.myproject.Time", {
    formatValue: function(oValue) {
        var re = /^([0-1]\d):([0-5]\d)\s?(?:AM|PM)?$/i;
        if(oValue!=null){
            if(re.test(oValue)) {
                // this.setEditable(false);    //ERROR
                //this.setValueState(sap.ui.core.ValueState.Success);   //ERROR
                alert("Success");
            }
        }

        return oValue;
    },

    parseValue: function(oValue) {
        return oValue;
    },

    validateValue: function(oValue) {}
});

However in above code I am unable to set TextField's state to "Success". May be I am unable to get reference to my TextField. Can anyone help me out to set this Valuestate? Any help/suggestion would be appreciated. Thanks, Kunal.

Upvotes: 0

Views: 3543

Answers (1)

Qualiture
Qualiture

Reputation: 4920

Please no, do never try to attempt to reference a UI control from within your formatter, ever! :-)

Simply throw a sap.ui.model.FormatException and the framework will do the rest for you: 

// ...snip...
formatValue: function(oValue) {
    var re = /^([0-1]\d):([0-5]\d)\s?(?:AM|PM)?$/i;
    if(oValue!=null){
        if(!re.test(oValue)) {
            throw new sap.ui.model.FormatException("Value " + oValue + " is not in a valid Date format");
        }
    }
    //optional, if you don't want empty/null dates
    else {
        throw new sap.ui.model.FormatException("Date cannot be null or empty");
    }

    return oValue;
},
// ...snip...

EDIT: In order to have a visual clue of a format or validation error, you should attach to the format and validation eventhandlers in your controller's onInit event handler:

sap.ui.getCore().attachFormatError(function (oEvent) {
  oEvent.getParameter("element").setValueState(sap.ui.core.ValueState.Error);
});
sap.ui.getCore().attachValidationError(function (oEvent) {
  oEvent.getParameter("element").setValueState(sap.ui.core.ValueState.Error);
});
sap.ui.getCore().attachValidationSuccess(function (oEvent) {
  oEvent.getParameter("element").setValueState(sap.ui.core.ValueState.None);
});

Upvotes: 2

Related Questions