angular.js input

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .error{
                background-color: red;
                color: #FFF;
                transition:all linear 0.5s;
            }
            .my-form.ng-invalid{
                background-color: red;
            }
            .my-form{
                transition: all linear 0.5s;
            }
        </style>
    </head>
    <body>
        <form name="myForm" class="my-form" ng-controller="ExampleController">
            <label>userName: <input type="text" name="userName" ng-model="user.name" required="required" ng-minLength="10" ng-maxLength="20"/></label>
            <p class="error" ng-show="!myForm.userName.$valid">校验没有通过，大傻子</p>
            <p class="error" ng-show="myForm.userName.$error.required">这个是必填项，大傻子</p>
            <p>user:{{user.name}}</p>
            <p>{{myForm.userName.$valid}}</p>
            <p>{{myForm.userName.$error}}</p>
            <p>{{myForm.userName.$dirty}}</p>
            <p>empty: {{myForm.userName.$empty}}</p>
            <p ng-show="myForm.userName.$error.minlength">太短了</p>
            <p ng-show="myForm.userName.$error.maxlength">太长了</p>
            <br /><br /><br />
            <p>{{myForm.$error.required}}</p>
            <p>{{myForm.$error.minlength}}</p>
            <p>{{myForm.$error.maxlength}}</p>
        </form>
        <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var app = angular.module('app' , []);
            app.controller('ExampleController' , ['$scope' , function($scope){

            }]);
        </script>
    </body>
</html>