Can Angular add a css class to a parent/sibling element when input is invalid

Question

My form elements look like this:

<div class="control-group">
    <label for="email">Email Address</label>
    <input type="email" class="form-control" name="email" ng-model="message.emailAddress" id="email" />
</div>

Angular automatically adds the class "ng-invalid" to the input when the email address is invalid - but I would also like it to add a class the label or the control-group.

Is that possible? or is there an easy workaround?

Adding this functionality yourself would require the use of a directive. You could maybe put an attribute directive on the control-group that detects if the input elemnt has the ng-invalid class and apply it to the label element as well if so. — sethetter, Apr 01 '14 at 15:09

score 5 · Answer 1 · answered Apr 01 '14 at 15:25

5

If your form's name is myForm, you could add

ng-class="{'some-class-name': !myForm.email.$valid}"

to the label and/or control group element.

answered Apr 01 '14 at 15:25

srdan

546
4
7

score 3 · Accepted Answer · answered Apr 01 '14 at 15:27

3

Classes are added to the parent form element labeled as ng-invalid-inputName. You could style off of this.

answered Apr 01 '14 at 15:27

sethetter

576
5
11

score 0 · Answer 3 · answered Apr 01 '14 at 17:15

0

I guess you can use angularjs ng-style

answered Apr 01 '14 at 17:15

Tiago Moutinho

1,372
1
13
18

score 0 · Answer 4 · edited May 23 '17 at 11:51

0

You could do:

ng-class="mode.input.$valid ? 'someclas': 'otherclass'";

or nested for multiple class or checks: as per: https://stackoverflow.com/a/21970785/4812515 stack post

ng-class="model.input.$valid ? 'someclas': (model.input.$valid ? 'class':'class')";

edited May 23 '17 at 11:51

Community

1
1

answered Feb 22 '16 at 17:57

alphapilgrim

3,761
8
29
58

score 0 · Answer 5 · answered May 24 '16 at 13:49

If you add an error class to .control-group you can style the parent of the input, but also the label and input.

Just check the boolean yourForm.email.$invalid with ng-class. yourForm is the name attribute value of the form element and email the name attribute vale of the input element.

<form name="yourForm">
    <div class="control-group" ng-class="{'control-group-error': yourForm.email.$invalid}">
        <label for="email">Email Address</label>
        <input type="email" class="form-control" name="email" ng-model="message.emailAddress" />
    </div>    
</form>

Can Angular add a css class to a parent/sibling element when input is invalid

5 Answers5