bessemHmidi/AngularBeans form validation example.md

## AngularBeans form validation example.md

      
    Raw
  

              AngularBeans form validation example.md
            
          
    AngularBeans form validation example

  
## register.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>

<script type="text/javascript"
	src="bower_components/angularjs/angular.min.js"></script>
<!-- <script type="text/javascript" src="bower_components/sockjs/sockjs.js"></script> -->
<script type="text/javascript" src="angular-beans.js"></script>

<script type="text/javascript">

angular.module("simpleApp",["angularBeans"])
.controller("FormCtrl",function($scope,registrationBean){

$scope.submit=function(){
	registrationBean.firstName=$scope.firstName;
	registrationBean.lastName=$scope.lastName;
	registrationBean.age=$scope.age;
	registrationBean.phoneNumber=$scope.phoneNumber;
	registrationBean.register();
}

});


</script>
</head>
<body ng-app="simpleApp">

	<div ng-controller="FormCtrl">

		<div class="panel-body" bean-validate> <!-- needed to activate bean validation (it must wrap the form) -->
			<div name="registerForm" ng-form>
				<fieldset>
					<label>FirstName </label> <input ng-model="firstName"
						name="firstName" type="text" autofocus />
					<p
						ng-show="registerForm.firstName.$error.required">required
						field</p>

					<p ng-show="registerForm.firstName.$error.minlength">min number
						of caracters not respected</p>

					<p ng-show="registerForm.firstName.$error.maxlength">max number
						of caracters not respected</p>

					<label>Last Name </label> <input ng-model="lastName"
						name="lastName" type="text" />
					<p ng-show="registerForm.lastName.$error.required">required
						field</p>


					<label>Age </label> <input ng-model="age" name="age" type="number" />
					<p ng-show="registerForm.age.$error.min">min</p>
					<p ng-show="registerForm.age.$error.max">max</p>

					<label>Phone number</label> <input ng-model="phoneNumber"
						name="phoneNumber" type="text" placeholder="888-888-8888" />
					<p ng-show="registerForm.phoneNumber.$error.pattern">invalid
						phone number</p>


				</fieldset>


				<button ng-click="submit()" ng-disabled="registerForm.$invalid">register</button>
			</div>
		</div>
	</div>

</body>
</html>

## RegistrationBean.java
package example.validation;

import javax.inject.Inject;
import javax.validation.constraints.Max;
import javax.validation.constraints.Min;
import javax.validation.constraints.NotNull;
import javax.validation.constraints.Pattern;
import javax.validation.constraints.Size;
import javax.ws.rs.POST;

import angularBeans.api.AngularBean;
import angularBeans.api.NGModel;
import angularBeans.api.NGPostConstruct;
import angularBeans.api.NGSubmit;
import angularBeans.context.NGSessionScoped;
import angularBeans.log.NGLogger;
import angularBeans.log.NGLogger.Level;

@NGSessionScoped
// or RequestScoped, ApplicationScoped
// but @NGSessionScoped is a scope with a shared context btwn HTTP session and
// Wsocket Sessions
// in other words, you can send for example a classic POST request to modify a
// bean property,
// and receiving data from a web socket notification, you are dealing with the
// same bean instance :)
@AngularBean
public class RegistrationBean {

	@Inject
	NGLogger logger;

	private String firstName;
	private String lastName;
	private int age;
	private String phoneNumber;

	// this method will be called after the construction of the CDI Bean
	@NGPostConstruct
	public void init() {
		logger.log(Level.INFO, "this is the init method ..");

	}

	@POST
	// or @GET @DELETE @PUT (or even @RealTime (Wsocket or long pollin...))
	@NGSubmit(backEndModels = { "*" })
	// with that all the @NGModel's will be synchronized with the request data
	public void register() {

		// this log will appeare @ the client side console :)
		logger.log(
				Level.INFO,
				"mr %s ,your age is %d so your request was sent to the server :)",
				firstName, age);

	}

	public void setFirstName(String firstName) {
		this.firstName = firstName;
	}

	@NGModel
	@NotNull
	// Bean Validation @NotNull = "required" HTML5 attribute
	public String getLastName() {
		return lastName;
	}

	public void setLastName(String lastName) {
		this.lastName = lastName;
	}

	@NGModel
	@NotNull
	@Size(min = 4, max = 10)
	// Bean Validation
	public String getFirstName() {
		return firstName;
	}

	@NGModel
	@Max(110)
	@Min(18)
	public int getAge() {
		return age;
	}

	public void setAge(int age) {
		this.age = age;
	}

	@NGModel
	@Pattern(regexp = "/^[0-9]{3}-[0-9]{3}-[0-9]{4}/")
	// attention you need to use HTML5 regex here
	public String getPhoneNumber() {
		return phoneNumber;
	}

	public void setPhoneNumber(String phoneNumber) {
		this.phoneNumber = phoneNumber;
	}

}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="ISO-8859-1">
	<title>Insert title here</title>

	<script type="text/javascript"
	src="bower_components/angularjs/angular.min.js"></script>
	<!-- <script type="text/javascript" src="bower_components/sockjs/sockjs.js"></script> -->
	<script type="text/javascript" src="angular-beans.js"></script>

	<script type="text/javascript">

	angular.module("simpleApp",["angularBeans"])
	.controller("FormCtrl",function($scope,registrationBean){

	$scope.submit=function(){
	registrationBean.firstName=$scope.firstName;
	registrationBean.lastName=$scope.lastName;
	registrationBean.age=$scope.age;
	registrationBean.phoneNumber=$scope.phoneNumber;
	registrationBean.register();
	}

	});


	</script>
	</head>
	<body ng-app="simpleApp">

	<div ng-controller="FormCtrl">

	<div class="panel-body" bean-validate> <!-- needed to activate bean validation (it must wrap the form) -->
	<div name="registerForm" ng-form>
	<fieldset>
	<label>FirstName </label> <input ng-model="firstName"
	name="firstName" type="text" autofocus />
	<p
	ng-show="registerForm.firstName.$error.required">required
	field</p>

	<p ng-show="registerForm.firstName.$error.minlength">min number
	of caracters not respected</p>

	<p ng-show="registerForm.firstName.$error.maxlength">max number
	of caracters not respected</p>

	<label>Last Name </label> <input ng-model="lastName"
	name="lastName" type="text" />
	<p ng-show="registerForm.lastName.$error.required">required
	field</p>


	<label>Age </label> <input ng-model="age" name="age" type="number" />
	<p ng-show="registerForm.age.$error.min">min</p>
	<p ng-show="registerForm.age.$error.max">max</p>

	<label>Phone number</label> <input ng-model="phoneNumber"
	name="phoneNumber" type="text" placeholder="888-888-8888" />
	<p ng-show="registerForm.phoneNumber.$error.pattern">invalid
	phone number</p>


	</fieldset>


	<button ng-click="submit()" ng-disabled="registerForm.$invalid">register</button>
	</div>
	</div>
	</div>

	</body>
	</html>
	package example.validation;

	import javax.inject.Inject;
	import javax.validation.constraints.Max;
	import javax.validation.constraints.Min;
	import javax.validation.constraints.NotNull;
	import javax.validation.constraints.Pattern;
	import javax.validation.constraints.Size;
	import javax.ws.rs.POST;

	import angularBeans.api.AngularBean;
	import angularBeans.api.NGModel;
	import angularBeans.api.NGPostConstruct;
	import angularBeans.api.NGSubmit;
	import angularBeans.context.NGSessionScoped;
	import angularBeans.log.NGLogger;
	import angularBeans.log.NGLogger.Level;

	@NGSessionScoped
	// or RequestScoped, ApplicationScoped
	// but @NGSessionScoped is a scope with a shared context btwn HTTP session and
	// Wsocket Sessions
	// in other words, you can send for example a classic POST request to modify a
	// bean property,
	// and receiving data from a web socket notification, you are dealing with the
	// same bean instance :)
	@AngularBean
	public class RegistrationBean {

	@Inject
	NGLogger logger;

	private String firstName;
	private String lastName;
	private int age;
	private String phoneNumber;

	// this method will be called after the construction of the CDI Bean
	@NGPostConstruct
	public void init() {
	logger.log(Level.INFO, "this is the init method ..");

	}

	@POST
	// or @GET @DELETE @PUT (or even @RealTime (Wsocket or long pollin...))
	@NGSubmit(backEndModels = { "*" })
	// with that all the @NGModel's will be synchronized with the request data
	public void register() {

	// this log will appeare @ the client side console :)
	logger.log(
	Level.INFO,
	"mr %s ,your age is %d so your request was sent to the server :)",
	firstName, age);

	}

	public void setFirstName(String firstName) {
	this.firstName = firstName;
	}

	@NGModel
	@NotNull
	// Bean Validation @NotNull = "required" HTML5 attribute
	public String getLastName() {
	return lastName;
	}

	public void setLastName(String lastName) {
	this.lastName = lastName;
	}

	@NGModel
	@NotNull
	@Size(min = 4, max = 10)
	// Bean Validation
	public String getFirstName() {
	return firstName;
	}

	@NGModel
	@Max(110)
	@Min(18)
	public int getAge() {
	return age;
	}

	public void setAge(int age) {
	this.age = age;
	}

	@NGModel
	@Pattern(regexp = "/^[0-9]{3}-[0-9]{3}-[0-9]{4}/")
	// attention you need to use HTML5 regex here
	public String getPhoneNumber() {
	return phoneNumber;
	}

	public void setPhoneNumber(String phoneNumber) {
	this.phoneNumber = phoneNumber;
	}

	}