How to set Twitter Bootstrap class=error based on AngularJS input class=ng-invalid?

Question

I have a problem where my CSS is not taking effect (in Chrome), and I think there is some conflict with Twitter Bootstrap.

input.ng-invalid {
    border-color: red;
    outline-color: red;
}

My pattern is defined in my controller as:

$scope.hexPattern = /^[0-9A-Fa-f]+$/;

And copying the HTML from the live DOM, I see that both ng-invalid and ng-invalid-pattern are set, so my ng-pattern must be working.

<div class="control-group">
    <label class="control-label" for="salt">Salt: </label>
    <div class="controls">
        <input type="text" id="salt" ng-model="salt" ng-pattern="hexPattern" class="ng-dirty ng-invalid ng-invalid-pattern">
    </div>
</div>

I see that in the "Validation states" section of the Forms section of Twitter Bootstrap Base CSS, I see I need to add the error class to the control-group div.

<div class="control-group error">

Question: How to set the class=error based on the child input class=ng-invalid? Can this be done with some soft of ng-class expression? Can I set this via code in the controller? Is there a way to ".$watch" the pattern evaluation like property changes? Any other ideas to get my "red" outline?

Artem · Accepted Answer · 2015-07-15 09:11:39Z

41

You can easily do it with ng-class directive:

<form name="myForm">
  <div class="control-group" ng-class="{ error: myForm.salt.$invalid }">
    <label class="control-label" for="salt">Salt: </label>
    <div class="controls">
      <input type="text" name="salt" ng-model="salt" ng-pattern="hexPattern">
    </div>
  </div>
</form>

http://plnkr.co/edit/RihsxA?p=preview

EDIT

Example with bootstrap 3.3.5 and angular 1.4.2:

<form name="myForm">
  <div class="form-group" ng-class="{ 'has-error': myForm.salt.$invalid }">
    <label class="control-label" for="salt">Salt: </label>
    <input class="form-control" type="text" name="salt" ng-model="salt" ng-pattern="hexPattern">
  </div>
</form>

http://plnkr.co/edit/5JNCrY8yQmcnA9ysC7Vc?p=preview

edited Jul 15, 2015 at 9:11

answered Apr 7, 2013 at 6:53

Artem

7848 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Kevin Hakanson Over a year ago

This worked for me once I added name="salt" instead of just id="salt"

J86 Over a year ago

For me too, I had to add the name="" attribute for this to work.

Drellgor Over a year ago

This didn't work for me and I'm not sure why. Has this changed some how with the newest version of AngularJS?

Drellgor Over a year ago

Figured it out. Bootstrap's class name is "has-error". The dash caused a javascript error so I had to wrap it in single quotes.

Jesse Webb Over a year ago

Note: In the attribute ng-class="{ error: myForm.salt.$invalid }", the salt term is a reference to the input with name="salt", not the ng-model.

|

kzar · Accepted Answer · 2013-09-23 11:15:00Z

9

I think a better solution is to just add your own CSS rules. It makes the code much simpler and, as a bonus, you can set the rule to only apply to "dirty" elements. That way fields will only be highlighted after the user has tried to enter something.

In my application I've just added this css, based on an example in the AngularJS forms documentation.

/* Forms */
.ng-invalid.ng-dirty {
  border-color: red;
  outline-color: red;
}
.ng-valid.ng-dirty {
  border-color: green;
  outline-color: green;
}

edited Sep 23, 2013 at 11:15

answered Sep 20, 2013 at 12:30

kzar

3,2792 gold badges19 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to set Twitter Bootstrap class=error based on AngularJS input class=ng-invalid?

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related