javascript - ng-class validation is not working in AngularJS - Stack Overflow

admin管理员组

文章数量:1399901

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;
}

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;
}

• javascript
• angularjs
• ng-class

Share Improve this question Follow edited Jul 21, 2016 at 8:37 Shashank Agrawal 25.8k1111 gold badges9696 silver badges125125 bronze badges asked Jul 21, 2016 at 8:18 ManojManoj 9711 gold badge44 silver badges1111 bronze badges 1

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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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./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.

本文标签： javascriptngclass validation is not working in AngularJSStack Overflow