验证 ui-select Angular JS - 外部表单答案

【问题标题】：validate ui-select Angular JS - outside form验证 ui-select Angular JS - 外部表单
【发布时间】：2016-08-30 05:49:52
【问题描述】：

我需要在按钮单击事件上验证 ui-select。当在 ui-select 中选择值时，只需要启用按钮。但问题是，按钮在不同的 div 控件之外，并且不使用表单标签（已经在 div 内使用另一个表单进行另一个操作）。我的示例代码如下：

<div class="form-group form-group-sm">
    <label class="control-label text-xs col-xs-12 col-sm-5 col-md-4 ">Search :</label>

    <div class="col-xs-12 col-sm-7 col-md-8 ">
        <ui-select ng-model="cl.selected" theme="bootstrap" on-select="reload($item)" ng-disabled="disabled" title=""
                   required>
            <ui-select-match placeholder="Filter by Client">{{$select.selected.clName}}</ui-select-match>
            <ui-select-choices repeat="cl in cls | clFilter: {clName: $select.search, clNum: $select.search}">
                <div ng-bind-html="cl.clName | highlight: $select.search"></div>
                <small>
                    Cl Num : {{cl.clNum}}
                </small>
            </ui-select-choices>
        </ui-select>
    </div>
</div>

按钮如下：

<ul class="list-inline pull-right">
    <li>
        <button id="clientSaveContinue" class="btn btn-primary  btn-sm next-step"
                ng-click="submitForm()">
            Save and Continue
        </button>
    </li>
</ul>

那么，如何启用按钮单击任何 ui-select 值包含或根据需要进行 ui-select

【问题讨论】：

能否提供plunkr链接

标签： angularjs validation ui-select

【解决方案1】：

信息不多=(

建议在表单标签中使用 submitForm()，而不是在按钮点击事件中。

<form ng-submit="submitForm()"></form>

如果您不能在表单中使用按钮，您可以在表单中创建 <input type="submit"> 或 <button type="submit">（如果不存在）并使用某种链接指令。

'use strict';

import angular from 'angular';

function linked() {
    return (scope, element, attrs) => {
        var id = attrs['linked'];
        element.on('click', function () {
            document.getElementById(id).click();
            return false;
        });
    }
}

export default angular.module('components', [])
    .directive('linked', linked)
    .name;

并使用它：

<form ng-submit="submitForm()">
    ...
    <input type="submit" style="display: none" id="mySubmitId">
</form> 

<button type="button" linked="mySubmitId">

看看ng-submit指令。

【讨论】：