Red border around combo-box

[Mohan Radhakrishnan]

Hi,

I am trying to add a read border around the drop-down if the user hasn't selected any valid value. Can I get some advice about this ?

I think the normal 'required' attribute didn't work due to some overlay. So I am trying to use a directive.

directive('stylevalidate', function ($compile) {

  return {

    restrict: 'A',

    link: function (scope, element, attrs,ngModel) {

          if (!element.attr('required')){

            element.attr("required", true);

            console.log('Styling the validation [' + element  + ']');

            element.addClass('red');

            $compile(element)(scope);

          }

    }

  };

})

Thanks,

Mohan

[Sander Elias]

Hi Mohan,

You should build a plunk showcasing your issue. The normal required should set the validity of your modal, and you can simply style that with a single CSS rule.

the ng-invalid class will be added to every invalid input element.

Regards

Sander

[Mohan Radhakrishnan]

Plunkr inside our corporation shows a connection reset message.

Meanwhile I have this.

I used https://github.com/silviomoreto/bootstrap-select which creates several div's and a button which are overlayed. 

My current questions is this.

This is a valid way to style a class.

class="selectpicker ng-class:{ 'redborder': valid };"

Isn't it ? I ensure that $scope.valid is 'true'. Once this is confirmed I will figure out where to put this code. I have also asked the bootstrap-select owner.

Thanks,

Mohan

[Sander Elias]

Mohan,

Well, there are always alternatives to plunker. (That link lists 30 of them!)

And yes, that is an valid way to style an element.

Regards

Sander

[Mohan Radhakrishnan]

I have created this http://jsfiddle.net/rmohan/cjq7jgkn/4/

I think in that code the 'select-bootstrap' style is not applied. It is applied in my desktop code.

But once it applies then we have several lines of div's and a button created by select-bootstrap. So if I use class="selectpicker ng-class:{ redborder: valid };" I want a red border to show that the data is invalid.

If I apply it like this

       <select ng-model="item"  data-style="btn-inverse" class="selectpicker redborder"  ng-options="item.code as item.name for item in items">

                 <option value="">Select Service</option>

        </select>

then the div surrounding it is not styled. So the border is not applied around the component.

Mohan

[Sander Elias]

Hi Mohan,

If you add required to your fiddle, it will work as expected. However, the red border is covered by the 'active state' border, and hard to notice then. That's just styling.

However, if you want to style another element according to the error state, you can do that, but it needs some extra attention.

look at this: http://jsfiddle.net/cjq7jgkn/6/

Regards

Sander

[Mohan Radhakrishnan]

I viewed the fiddle. I tried to edit the HTML in chrome and when I add  style="border: 1px solid red;" I see the red border. 

But class="btn-group bootstrap-select ng-class:{ 'ng-invalid': valid }; ng-pristine ng-untouched ng-valid" doesn't paint the border.    

'valid' is either true or false and depending on it 'ng-invalid': is applied. Hope I understood that.       

          <div style="border: 1px solid red;" class="btn-group bootstrap-select ng-class:{ 'ng-invalid': valid }; ng-pristine ng-untouched ng-valid">

          <button type="button" class="btn dropdown-toggle selectpicker btn-inverse" data-toggle="dropdown" title="Select Service">

Thanks.

[Sander Elias]

You added conflicting style's

ng-invalid and ng-valid should never be at the same element at the same time.  And as with all styling, css rules may conflict, and give unexpected results. That has nothing to do with angular.

[Mohan Radhakrishnan]

Agreed. I will pursue this with the select-bootstrap author.

As fast as AngularJS is concerned this is what I have decided to use.

      <select ng-model="item"  data-style="btn-inverse"  class="selectpicker" ng-style="valid  && {'border': '1px solid red'}" ng-options="item.code as item.name for item in items">

                 <option value="">Select Service</option>

        </select>

Thanks.