Angular bootstrap validation done unobtrusively

Question

I am currently validating forms using the well prescribed method:

  <form name="userForm">
    <div class="form-group" ng-class="{ 'has-error': userForm.email.$invalid }" >
      <input type="email" class="form-control" name="email" ng-model="user.email" required />
    </div>
  </form>

While this is not the end of the world I wondered if there was a less obtrusive way of doing this. I have already stated the field is required and angular will paint the element with css class based upon it's state. Could I achieve the same ends with CSS rather than using ng-class="{ 'has-error': userForm.email.$invalid }". Many thanks

Invalid element will have ng-invalid class + other validation classes. — karaxuna
– karaxuna, Commented Feb 23, 2016 at 11:20
Yes, it will also add others like ng-invalid-max depending what has invalidated it. I just wanted to pick up on this in CSS rather than using ng-class everywhere — jolySoft
– jolySoft, Commented Feb 23, 2016 at 11:27

Dwijen · Accepted Answer · 2017-06-08 05:28:41Z

2

You can style the angular classes in your CSS.

.ng-invalid {
    border: 1px solid red;
}

.ng-valid {
    border: 1px solid green;
}

If you want to apply it just to inputs rather than creating a border round the form you can use the following too:

input.ng-invalid {
    border: 1px solid red;
}

edited Jun 8, 2017 at 5:28

answered Feb 23, 2016 at 11:23

Dwijen

5905 silver badges16 bronze badges

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

Collectives™ on Stack Overflow

Angular bootstrap validation done unobtrusively

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related