I attempted to implement a green background for edited and valid input.
However, it seems that even for invalid input, the background remains green. Ideally, invalid input should trigger a yellow background with red text.
I would greatly appreciate any assistance in resolving this issue.
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;
}