ng-class 验证在 AngularJS 中不起作用答案

【问题标题】：ng-class validation is not working in AngularJSng-class 验证在 AngularJS 中不起作用
【发布时间】：2016-07-21 08:18:30
【问题描述】：

如果已编辑且有效，我尝试将绿色背景放入。

但是，即使是无效的，它也会显示绿色背景。在无效时，它应该显示带有红色文本的黄色背景。

提前感谢您给我解决方案。

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

【问题讨论】：

您没有添加任何验证约束，那么您期望的 invalid 是什么？当然，它总是有效的。

标签： javascript angularjs ng-class

【解决方案1】：

该输入元素没有应用验证，因此它始终有效。试试下面的表格，我已经应用了required 和email 验证：

（只有输入正确的电子邮件地址才会显示为绿色）

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>

或者，您可以使用 this 库以简单的方式提供 Bootstrap 表单验证。

【讨论】：

非常感谢沙尚克。它工作正常。