$ vi app/assets/templates/users/new.html.erb
<div ng-controller="UsersNewCtrl" class="row"> <style> form.ng-invalid.ng-dirty { background-color: lightpink; } form.ng-valid.ng-dirty { background-color: lightgreen; } form { padding: 10px;} </style> <div class="col-md-6 col-md-offset-3"> <h1 class="text-center">Sign up</h1> <form name="userNewForm" novalidate> <div class="well"> <div class="form-group" ng-class="{'has-error': userNewForm.name.$invalid && userNewForm.name.$dirty}"> <label>Name</label> <input name="name" class="form-control" ng-model="user.name" required ng-maxlength="20" /> <span class="text-danger" ng-show="userNewForm.name.$dirty && userNewForm.name.$error.required"> Name can't be blank </span> <span class="text-danger" ng-show="userNewForm.name.$dirty && userNewForm.name.$error.maxlength"> Name is too long (maximum is 20 characters) </span> </div> <div class="form-group" ng-class="{'has-error': userNewForm.email.$invalid && userNewForm.email.$dirty}"> <label>Email</label> <input type="email" name="email" class="form-control" ng-model="user.email" required /> <span class="text-danger" ng-show="userNewForm.email.$dirty && userNewForm.email.$error.required"> Email can't be blank </span> <span class="text-danger" ng-show="userNewForm.email.$dirty && userNewForm.email.$error.email"> Email is invalid </span> </div> <div class="form-group" ng-class="{'has-error': userNewForm.password.$invalid && userNewForm.password.$dirty}"> <label>Password</label> <input type="password" name="password" class="form-control" ng-model="user.password" required ng-minlength="6" /> <span class="text-danger" ng-show="userNewForm.password.$dirty && userNewForm.password.$error.required"> Password can't be blank </span> <span class="text-danger" ng-show="userNewForm.password.$dirty && userNewForm.password.$error.maxlength"> Password is too short (minimum is 6 characters) </span> </div> .............. <button ng-click="submit()" class="btn btn-primary" ng-disabled="userNewForm.$invalid" > Create my account </button> </div> </form> </div> </div>