How do I change the border color on ui-select when required data is missing

Question

I have an AngularUI ui-select which is a required field and I need to change the border color when the user tries to submit the form without selecting a value for it. Here is the HTML:

<ui-select required ng-model="user.managerUser" name="manager" theme="bootstrap"
            ng-class="{'requiredBorder': form.$submitted && form.manager.$error.required}">
  <ui-select-match>{{$select.selected.userName}}</ui-select-match>
  <ui-select-choices repeat="manager in managers">
    <div ng-bind-html="manager.userName | highlight: $select.search"></div>
  </ui-select-choices>
</ui-select>

This fails because the generated HTML adds "{open: $select.open}" to ng-class so that the actual ng-class that angular tries to parse looks like:

ng-class="{'requiredBorder', submitted && form.manager.$error.required} {open: $select.open}"

And angular gags on the second set of curly braces. Any help would be appreciated.

Answer 1

when you add the required attribute you get the advantage of angular automatically adding two classes to the element, ng-valid and ng-invalid. you can use these to color the border:

CSS:

.ng-valid>button {
    border-color: green;
}
.ng-invalid>button {
    border-color: red;
}

HTML: (removed the ng-class attribute)

<ui-select required ng-model="user.managerUser" name="manager" theme="bootstrap">
    <ui-select-match>{{$select.selected.userName}}</ui-select-match>
    <ui-select-choices repeat="manager in managers">
        <div ng-bind-html="manager.userName | highlight: $select.search"></div
    </ui-select-choices>
</ui-select>

Answer 2

You should add this style in your file.

<style>
    .has-error .form-control
    {
        border-color: red !important;
    }
</style>

And add a ng-class as mentioned below:

ng-class="{ 'has-error': form.$invalid }"

This Worked fine for me.