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

Question

我在表单上使用 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>

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

Answer 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" 的简单验证器，用于检查模型中的值是否在允许名称列表中。