CODEWITHSUNDEEP
javascriptcssangularjs
user56690
user56690

Reputation: 259

angularjs ng-blur when something when form field is empty

Below is my angular js code:

       <div class = "large" ng-class="{'large active':hasFocus==true,'large':hasFocus==false}">
		<label class="label">Username</label>
        <input class="field" name="username" type="text" ng-model="username" 
        ng-click="hasFocus=true" ng-blur="hasFocus=false"></div>

on click and on click-away, the css classes are getting changed. How do i add logic to check is no text is entered then only switch class? If some text is entered then the class should no change.

Any help much appreciated.

Thanks in advance!

Upvotes: 0

Views: 427

Answers (1)

pantuofermo
pantuofermo

Reputation: 170

add a check to the "username" field in the ng-class:

<div class="large" ng-class="{'large active':hasFocus==true ,'large':hasFocus==false && username}">
        <label class="label">Username</label>
        <input class="field" name="username" type="text" ng-model="username" 
        ng-click="hasFocus=true" ng-blur="hasFocus=false"></div>

The important part is 'hasFocus == false && username'. You can check username has text or not by just writing "&& username" to your logic statement --> this will return true if username has text, and will return false if it doesn't.

Upvotes: 1

Related Questions