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?
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.
Classes are added to the parent form element labeled as ng-invalid-inputName. You could style off of this.
I guess you can use angularjs ng-style
You could do:
ng-class="mode.input.$valid ? 'someclas': 'otherclass'";
or nested for multiple class or checks: as per: https://stackoverflow.com/a/21970785/4812515stack post
ng-class="model.input.$valid ? 'someclas': (model.input.$valid ? 'class':'class')";
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>
