How to make an xeditable select input mandatory (required) in AngularJS

Question

I have an AngularJS project that uses Angular Bootstrap and I use the Angular-xeditable library for some edit-in-place fields in a table.

One of the inputs I have is a "select" input, i.e. a drop-down list that allows a user to select one option. (editable-select in xeditable). I am trying to make this input mandatory when saving the form, but I cannot find a way to do this. Similar to all the x-editable controls I would expect that I can simply add an e- prefix to the standard angular directive to apply that directive to the xeditable control, that is, I should be able to add e-ng-required="true" to my control to make it mandatory. Yet this does not work. I do not get any errors when I add this, but it doesn't "do" anything. I can still save my form without selecting an item.

The following is a code sample of what I'm trying to do:

<form editable-form name="tableform" onaftersave="saveSubmissions()" oncancel="cancel()">
    <table>
        <!--Define table headings and columns...-->
        <!--Define an ng-repeat to display each row-->
        <tr ng-repeat="currentRow in dataRows">
            <!--Add some columns for the row-->
            <!--Add the select/drop-down column pertaining to this question-->
            <td>
                <span editable-select="currentRow.vendorID" e-ng-options="x.vendorId as x.name for x in vendors" e-form="tableform" e-ng-required="true">
                    {{showVendor(currentRow)}}
                </span>
            </td>
            <!--Add some more columns for each row-->
        </tr>
    </table>
</form>

Even though I've set e-ng-required="true" on the element, it does nothing. How can I make the selection of an item mandatory using xeditable? I have searched for examples but couldn't find anything helpful.

Answer 1

Unfortunately required doesn't work with form validators as stated in the following links

Required field validation is not working

Validation field form using tag "form" with angular-xeditable

You have to manually check and set the validity of input onbeforesave and set validity of input element.

html

<span editable-select="currentRow.vendorID" e-ng-options="x.vendorId as x.name for x in vendors" e-form="tableform" e-name="vendor" onbeforesave="checkValidity()">
    {{showVendor(currentRow)}}
</span>

js

$scope.checkValidity = function(){
    if(valid){
        $scope.tableform.$setValidity("vendor", true);
    }
    else{
        $scope.tableform.$setValidity("vendor", false);
    }
}