How to validate non-form elements in Angular?

Question

I'm using angular-bootstrap-ui-dropdown on a form. I wanted to run some validation on this element. Is it possible with Angular Validator?

The code currently looks as follows, all of these are in a form element and I managed to validate other standard form elements (eg. input etc.)

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

Is it possible to validate if there is a value selected in this dropdown?

Answer 1

You could add $validators to the ngModelController (assuming you are using ngModel). For instance, in your directive you can require it and add the validators you could want:

variable with one simple list of allowed names:

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

...and this could be part of the directive:

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

In this example, I have added a simple validator named "isNameAllowed" that checks if the value in the model is in the list of allowed names.