如何在 AngularJS 中使可编辑的 select 输入强制（必需）

Question

我有一个使用 Angular Bootstrap 的 AngularJS 项目，我将 Angular-xeditable 库用于 [=33] 中的一些就地编辑字段=].

我的输入之一是 "select" 输入，即允许用户 select 一个选项的下拉列表。（editable-select 在 xeditable 中）。我试图在保存表单时强制输入此内容，但我找不到执行此操作的方法。与所有 x-editable 控件类似，我希望我可以简单地向标准 angular 指令添加一个 e- 前缀以将该指令应用于 xeditable 控件，即，我应该能够将 e-ng-required="true" 添加到我的控件中以使其成为强制性的。然而，这是行不通的。添加时我没有收到任何错误，但它没有 "do" 任何东西。我仍然可以在没有 select 一个项目的情况下保存我的表格。

以下是我正在尝试执行的代码示例：

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

即使我在元素上设置了 e-ng-required="true"，它也没有任何作用。我如何使用 xeditable 使项目的 selection 成为强制性的？我搜索了示例，但找不到任何有用的信息。

Answer 1

不幸的是，要求不适用于以下链接中所述的表单验证器

Required field validation is not working

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

你必须手动检查和设置input onbeforesave的有效性并设置input元素的有效性。

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

如何在 AngularJS 中使可编辑的 select 输入强制（必需）

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

angularjs

x-editable

angular-xeditable