Simple form mandatory fields

[former_member589109]

Hi,
I have a SimpleForm in my app:

<f:SimpleForm class="editableForm" columnsL="1" columnsM="1" editable="true" emptySpanL="4" emptySpanM="4" id="newEntitySimpleForm" labelSpanL="3" labelSpanM="3" layout="ResponsiveGridLayout" maxContainerCols="2" minWidth="1024" title="{i18n>form.title}">

And in it there are these two fields with label:

<Label required="true" text="{i18n>form.street}"/>
<Input name="street" id="street_id" valueLiveUpdate="true" liveChange="_validateSaveEnablement" maxLength="60" value="{ path: 'street', type: 'sap.ui.model.odata.type.String' , constraints:{ maxLength:60, nullable:false } }" placeholder="{i18n>form.street}"/>
<Input name="house_number" id="house_number_id" valueLiveUpdate="true" liveChange="_validateSaveEnablement" maxLength="10" value="{ path: 'house_number', type: 'sap.ui.model.odata.type.String' , constraints:{ maxLength:10, nullable:true } }" placeholder="{i18n>form.number}"/>

And it looks exactly as I wish - the label and both fields in a line.
There is also the _validateSaveEnablement function:

_validateSaveEnablement: function() {
var aInputControls = this._getFormFields(this.byId("newEntitySimpleForm"));
  for (var m = 0; m < aInputControls.length; m++) {
    if (aInputControls[m].required) {
      var sValue = aInputControls[m].control.getValue();
      if (!sValue) {
        this._oViewModel.setProperty("/enableCreate", false);
        return;
      }
    }
  }
  this._checkForErrorMessages();
},

With that, it enables saving data while both fields are filled, but it doesn't when any of them is empty, but I would like it to be enabled even when the second field is empty.
I have achieved that by adding another one Label with required="false", but it moved the second field to the second line.
Is it possible to have this second field not mandatory without moving it to the second line?

EDIT.
I've achieved my goal by changing the if statement to:

var sId = aInputControls[m].control.sId;
if (!sValue && !sId.includes("house_number_id")) {

, but I don't really like this solution.

What is the better way to do it?

[maheshpalavalli · Accepted solution]

Hi Bartosz Piotrowski,

You can do one thing, instead of making the label required, you can make the input control as enabled. This will solve your issue, but you need to change the logic of validation i guess.

If you have two input controls in a row for a single for a single label control and any one of them is having the required property set as true, then the label will appear with required indicator.

BR,

Mahesh

[maheshpalavalli · Accepted solution]

My bad, I mentioned that you should use enabled instead of required :D.. But anyway u understood what I meant 😄