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?

Answer 1

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.

Answer 2

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