(1)Rails validation
$ vi app/models/user.rb
class User < ActiveRecord::Base
validates :password, length: { minimum: 6 }
validates :name, presence: true, length: { maximum: 20 }
VALID_EMAIL_REGEX = /\A[\w+\-.]+@[a-z\d\-.]+\.[a-z]+\z/i
validates :email, presence: true, format: { with: VALID_EMAIL_REGEX },
uniqueness: { case_sensitive: false }
end
(2)AngularJS controller
1)underscore.js include
$ vi app/assets/javascripts/application.js
//= require underscore-min
2)AngularJS controller "UsersNewCtrl"
$ vi app/assets/javascripts/mymodule.js.erb
myModule.controller("UsersNewCtrl", function($scope, userResource, $location, flashService) {
.....
$scope.submit = function() {
.......
function failure(response) {
_.each(response.data, function(errors, key) {
_.each(errors, function(e) {
$scope.userNewForm[key].$dirty = true;
$scope.userNewForm[key].$setValidity(e, false);
});
});
}
userResource.create($scope.user, success, failure);
};
$scope.errorMessage = function(name) {
var s = $scope.userNewForm[name].$error;
result = [];
_.each(s, function(key, value) {
result.push(name + " " + value);
});
return result.join(", ");
};
});
(3)AngularJS template view
$ 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>
<span class="text-danger" ng-show="userNewForm.name.$dirty && userNewForm.name.$invalid">
{{errorMessage('name')}}
</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>
<span class="text-danger" ng-show="userNewForm.email.$dirty && userNewForm.email.$invalid">
{{errorMessage('email')}}
</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>
<span class="text-danger" ng-show="userNewForm.password.$dirty && userNewForm.password.$invalid">
{{errorMessage('password')}}
</span>
</div>
<div class="form-group" ng-class="{'has-error': userNewForm.password_confirmation.$invalid && userNewForm.password_confirmation.$dirty}">
<label>Password_confirmation</label>
<input type="password" name="password_confirmation"
class="form-control"
ng-model="user.password_confirmation"
required
ng-minlength="6" />
<span class="text-danger" ng-show="userNewForm.password_confirmation.$dirty && userNewForm.password_confirmation.$error.required">
Password_confirmation can't be blank
</span>
<span class="text-danger" ng-show="userNewForm.password_confirmation.$dirty && userNewForm.password_confirmation.$error.maxlength">
Password_confirmation is too short (minimum is 6 characters)
</span>
<span class="text-danger" ng-show="userNewForm.password_confirmation.$dirty && userNewForm.password_confirmation.$invalid">
{{errorMessage('password_confirmation')}}
</span>
</div>
<button ng-click="submit()" class="btn btn-primary"
ng-disabled="userNewForm.$invalid" >
Create my account
</button>
<button ng-click="resetError(userNewForm)" class="btn btn-primary">
Reset Error
</button>
</div>
</form>
</div>
</div>