Adding class dynamically based on condition in angular js app

Question

In one of my application, I have a requirement to add a specific class when it has any data irrespective of it's input type (email, text) using AngularJS:

In this plunk, just type any thing in the text box to change the border color.

code for reference

<body ng-app="">
    <input type='text' ng-model='Custom' ng-class="{red : Custom.length}">
    <label ng-bind='Custom'></label>
</body>

In a similar way I want it for all the input types.

In case of email field. When user typed wrong email, it's not working because model will not get value when it is invalid.

Similar case: stackoverflow.com/questions/24619437/…

user1334319
– user1334319

2015-03-10 11:47:28 +00:00
Commented Mar 10, 2015 at 11:47 — user1334319
– user1334319, Commented Mar 10, 2015 at 11:47

sylwester · Accepted Answer · 2015-03-10 11:54:19Z

1

Angular not binding value to model until model is valid so in case of input type filed lengthwill be 0 until you type in proper email. But you can do that using $viewValue value please see demo below

.red {
  border-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="">
  <form name="myform">
    <input type='text' ng-model='Custom' ng-class="{red : Custom.length}">
    <input type='email' ng-model='email' ng-class="{red : myform.email.$viewValue}" name="email">

    <label ng-bind='Custom'></label>
  </form>
</body>

answered Mar 10, 2015 at 11:54

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Moshe Shaham · Accepted Answer · 2015-03-10 11:56:22Z

0

This happens because until the input contains a valid email address ng-model is empty.

One way to overcome it is to check the $viewValue variable like this:

<form name="myForm" novalidate>
    <input name="email" type='email' ng-model='email' 
           ng-class="{red : myForm.email.$viewValue.length}">
</form>

answered Mar 10, 2015 at 11:56

Moshe Shaham

16.1k24 gold badges82 silver badges125 bronze badges

Collectives™ on Stack Overflow

Adding class dynamically based on condition in angular js app

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related