<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">
<style>
input.ng-dirty.ng-invalid {
background-color: red;
}
input[required].ng-pristine
{
border-color: Silver;
/*background-color: yellow;*/
}
input[required].ng-dirty.ng-valid {
background-color: yellow;
}
</style>
<div ng-controller="MyCtrl">
<form name="name">
<script>
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.reset = function() {
$scope.requiredField = '';
// Todo: Reset field to pristine state, its initial state!
};
}
</script>
<input name="requiredField"
type="text"
ng-model="requiredField"
required="required">Required field<br>
<button ng-click="reset()">Reset</button>
</form>
<hr/>
Pristine: {{form.$pristine}}
</div>
</body>
</html>