AngularJS | Conditional Class using ng-class

Question

I'm wanting to apply a conditional class to an element on the page.

Currently it's working with the following code:

ng-class="{ 'vfnz-form--error' : loginForm.username.$invalid  }

This applies a invalid class if the input field is invalid. I'm wanting to apply a "valid" class when the user input field is valid.

Is this possible to achieve in the same line of code?

Here is a fiddle example: JSFIDDLE

Answer 1

You could just do it in many ways, one simple way would be to use an object with bracket notation.

Example:-

ng-class="{ true: 'vfnz-form--error', false : 'vfnz-form--good'  }[loginForm.username.$invalid]"

Or (since it cannot be both invalid and valid):-

ng-class="{'vfnz-form--error' : loginForm.username.$invalid, 'vfnz-form--good' : loginForm.username.$valid}"

And if you want to do it only if form is dirty you could yes add condition to check for $pristine/$dirty but you could also make use of the class angular adds on the inputs (and on the form as well) i.e ng-pristine/ng-dirty so you could define the rule with these class names to make it more specific.

ex:-

.vfnz-form--error .ng-dirty.something{/*apply bad rules*/}