Angular toggle class on input if validation is valid

Question

I am trying to toggle css class on input if validation is valid, i can do if is invalid, but i need two classes if is valid and if is not. Is it easy to make it if is not valid, but how to add if is valid, here is my code i have for now:

<form name="userForm" ng-submit="submitForm()" novalidate>
    <input type="email" name="email" placeholder="E-mailadres" class="input-field" ng-model="user.email" required ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }" />
    <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>
    <input type="password" name="password" ng-model="user.password" placeholder="Wachtwoord" class="input-field" required />
    <p ng-show="userForm.password.$invalid && !userForm.password.$pristine" class="help-block">You name is required.</p>
    <button type="submit" class="btn hit-btn" ng-disabled="userForm.$invalid">Log in</button>
</form>

You will notice that i have class has-error but i need also class no-error

Sankar · Accepted Answer · 2016-12-13 10:53:54Z

Try this...

.has-error {
  background: red;
}
.no-error {
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app>
  <form name="userForm" ng-submit="submitForm()" novalidate>
    <input type="email" name="email" placeholder="E-mailadres" class="input-field" ng-model="user.email" required ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine,'no-error' :!userForm.email.$invalid }" />
    <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>
    <input type="password" name="password" ng-model="user.password" placeholder="Wachtwoord" class="input-field" required />
    <p ng-show="userForm.password.$invalid && !userForm.password.$pristine" class="help-block">You name is required.</p>
    <button type="submit" class="btn hit-btn" ng-disabled="userForm.$invalid">Log in</button>
  </form>
</div>

Duncan · Accepted Answer · 2016-12-13 11:08:34Z

1

If you need another class, just add it with the opposite condition:

<input type="email" name="email" placeholder="E-mailadres"
  class="input-field" ng-model="user.email" required
  ng-class="{
     'has-error' : userForm.email.$invalid && !userForm.email.$pristine, 
     'no-error' : !userForm.email.$invalid || userForm.email.$pristine 
  }"
/>

edited Dec 13, 2016 at 11:08

answered Dec 13, 2016 at 10:48

Duncan

96.4k15 gold badges129 silver badges160 bronze badges

2 Comments

Miomir Dancevic Over a year ago

This not working, now even has-error is not apllied?

Duncan Over a year ago

@MiomirDancevic sorry I had a spurious ), try again without it.

Sunny · Accepted Answer · 2016-12-13 10:49:31Z

0

 ng-class="{userForm.email.$invalid && !userForm.email.$pristine?'has-error':'no-error'}"

answered Dec 13, 2016 at 10:49

Sunny

3082 silver badges14 bronze badges

2 Comments

Miomir Dancevic Over a year ago

This not working, now even has-error is not apllied?

Sunny Over a year ago

Have you define both classes ? scotch.io/tutorials/the-many-ways-to-use-ngclass Ternary operator should work.

Collectives™ on Stack Overflow

Angular toggle class on input if validation is valid

3 Answers 3

Comments

2 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

2 Comments

Related