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
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*/}
ng-dirty to the input you can actually have your css rules written accordingly instead of adding one more condition in ng-class. i.e .vfnz-form--error .ng-dirty.something{/*apply bad rules*/}