如何验证 Angular 中的非表单元素？答案

【问题标题】：How to validate non-form elements in Angular?如何验证 Angular 中的非表单元素？
【发布时间】：2015-12-05 22:05:39
【问题描述】：

我在表单上使用angular-bootstrap-ui-dropdown。我想对这个元素进行一些验证。 Angular Validator可以吗？

目前的代码如下所示，所有这些都在一个表单元素中，我设法验证了其他标准表单元素（例如输入等）

<div class="btn-group" uib-keyboard-nav uib-dropdown>
    <button id="salutation-button" type="button" class="btn btn-primary" uib-dropdown-toggle>
        <span class="dp-caption">{{passenger.salutation || 'Salutation'}}</span> <span
            class="fa fa-angle-down"></span>
    </button>
    <ul class="uib-dropdown-menu" role="menu" aria-labelledby="single-button">
        <li ng-repeat="salutation in salutationList" ng-click="setSalutation(salutation)"
            role="menuitem"><a href="#">{{salutation}}</a></li>
    </ul>
</div>

是否可以验证此下拉列表中是否选择了一个值？

【问题讨论】：

您可以使用下拉菜单的内置方法来验证。
@ngLover 文档here 似乎没有解释我将如何去做。此外，下拉列表中应用的类似乎不会因选择而改变。

标签： angularjs forms validation angular-ui-bootstrap angular-ui

【解决方案1】：

您可以添加 $validators to the ngModelController（假设您使用的是 ngModel）。例如，在您的指令中，您可以要求它并添加您可能想要的验证器：

具有一个简单的允许名称列表的变量：

var allowedNames = [...array with names...]

...这可能是指令的一部分：

    ...
    require: '?ngModel',
    link: function (scope, iElement, iAttribute, ngModel) {
        var $validators = { // object with one or more validators
            isNameAllowed: function (modelValue, viewValue) {
                var value = modelValue || viewValue;

                if (!value || allowedNames.indexOf(value) > -1) {
                    return true;
                } else {
                    return false;
                }
            }
        };

        ngModel.$validators = angular.extend({}, ngModel.$validators, $validators);
        ...
    }
    ...

在此示例中，我添加了一个名为“isNameAllowed”的简单验证器，用于检查模型中的值是否在允许的名称列表中。

【讨论】：