<!DOCTYPE html>
<html ng-app="formExample">
<head>
<link rel="stylesheet" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<form name="myForm" ng-controller="FormController" class="my-form">
userType: <input name="input" ng-model="userType" required>
<span class="error" ng-show="myForm.input.$error.required">Required!</span><br>
<code>userType = {{userType}}</code><br>
<code>myForm.input.$valid = {{myForm.input.$valid}}</code><br>
<code>myForm.input.$invalid = {{myForm.input.$invalid}}</code><br>
<code>myForm.input.$error = {{myForm.input.$error}}</code><br>
<code>myForm.input.$dirty = {{myForm.input.$dirty}}</code><br>
<code>myForm.input.$pristine = {{myForm.input.$pristine}}</code><br>
<code>myForm.$valid = {{myForm.$valid}}</code><br>
<code>myForm.$error.required = {{!!myForm.$error.required}}</code><br>
<button ng-click="setpristine()">Set Pristine</button>
</form>
</body>
</html>
// Code goes here
angular.module('formExample', [])
.controller('FormController', ['$scope', function($scope) {
$scope.userType = 'guest';
$scope.setpristine = function(){
$scope.userType = 'guest';
if($scope.myForm.$dirty){
$scope.myForm.$setPristine();
}
};
}]);
/* Styles go here */
.my-form {
transition:all linear 0.5s;
background: transparent;
}
.my-form.ng-invalid {
background: red;
}