ng-class validation is not working in AngularJS

Question

I tried to put green background if it is edited and valid.

But, even for invalid also it is showing green background. On invalid it should show the yellow background with red text.

Thanks in advance for giving me the solution.

html

<div ng-app="myApp" ng-controller="formCtrl">

    <form name="inputform">
        <div ng-class="{'has-success': inputform.email.$dirty && inputform.email.$valid, 'has-error': inputform.email.$dirty && inputform.email.$invalid}">
            <label for="exampleInputEmail1">Email</label>
            <input type="text" name="email" ng-model="data.email" id="exampleInputEmail1" />
        </div>
    </form>

    {{data}}

</div>

javascript

var module = angular.module("myApp", []);

module.controller("formCtrl", ['$scope', function($scope){

    $scope.data = {};

}]);

css

.has-error {
    color: red;
    background-color: red;
}

.has-success {
    color: black;
    background-color: green;
}

You didn't add any validation constraints, so what is invalid you expect then? Of course, it's always valid. — dfsq
– dfsq, Commented Jul 21, 2016 at 8:27

Shashank Agrawal · Accepted Answer · 2016-07-21 08:35:27Z

4

There is no validation applied to that input element so it is valid all the time. Try the below form, I've applied the required and email validation:

(It will only be green if a proper email address in entered)

var module = angular.module("myApp", []);

module.controller("formCtrl", ['$scope', function($scope){

    $scope.data = {};

}]);

.has-error {
    color: red;
    background-color: red;
}

.has-success {
    color: black;
    background-color: green;
}

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

<div ng-app="myApp" ng-controller="formCtrl">

    <form name="inputform">
        <div ng-class="{'has-success': inputform.email.$valid, 'has-error': inputform.email.$invalid}">
            <label for="exampleInputEmail1">Email</label>
            <input type="email" name="email" required ng-model="data.email" id="exampleInputEmail1" />
        </div>
    </form>

    {{data}}

</div>

Alternatively, you can use this library to provide Bootstrap form validation in simple way.

edited Jul 21, 2016 at 8:35

answered Jul 21, 2016 at 8:29

Shashank Agrawal

25.9k11 gold badges98 silver badges126 bronze badges

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

1 Comment

Manoj Over a year ago

Thank you very much Shashank. it is working exactly.

Collectives™ on Stack Overflow

ng-class validation is not working in AngularJS

html

javascript

css

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

html

javascript

css

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related