如何在AngularJS中强制执行xeditable select输入(必需)

时间:2018-01-18 09:57:28

标签: angularjs x-editable angular-xeditable

我有一个使用Angular Bootstrap的AngularJS项目,我使用Angular-xeditable库来表中的一些现场编辑字段。

我的输入之一是“选择”输入,即允许用户选择一个选项的下拉列表。 (editable-select in xeditable)。 我正在尝试在保存表单时强制执行此输入,但我找不到这样做的方法。与所有x-editable控件类似,我希望我可以简单地在标准angular指令中添加一个e-前缀,将该指令应用于xeditable控件,也就是说,我应该能够添加e-ng-required =“true”到我的控制,使其成为强制性的。然而,这不起作用。我添加它时没有任何错误,但它没有“做”任何事情。我仍然可以在不选择项目的情况下保存表单。

以下是我正在尝试做的代码示例:

<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强制选择项目?我搜索了一些例子但找不到任何有用的东西。

1 个答案:

答案 0 :(得分:0)

遗憾的是,必须使用表单验证器,如以下链接所述

Required field validation is not working

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

您必须手动检查并设置输入onbeforesave的有效性并设置输入元素的有效性。

HTML

content = forms.CharField(widget=CKEditorWidget())

JS

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