<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.my-form{
transition: all linear 0.5s;
background: transparent;
}
.my-form.ng-invalid{
background-color: red;
}
</style>
</head>
<body ng-app="app">
<form name="myForm" class="my-form">
userType: <input type="text" name="input" ng-model="userType" required="required"/><br />
<span class="error" ng-show="myForm.input.$error.required">Required!</span><br />
<code>userType:{{userType}}</code><br />
<code>$valid:{{myForm.input.$valid}}</code><br />
<code>$error:{{myForm.input.$error}}</code><br />
<code>myForm.$valid: {{myForm.$valid}}</code><br />
<code>myForm.$error.required:{{myForm.$error.required}}</code>
</form>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="'+window.location.pathname+'"/>'));
</script>
<script type="text/javascript">
var app = angular.module('app' , []);
/*app.controller('formController' , ['$scope' , function($scope){
$scope.userType = 'gest';
}])*/
</script>
</body>
</html>