Web Application using rest in AngularJS – Part-2

As discussed in last blog , intro to AngularJS, its directives and Routing. Let us continue here with Angular Validations and how to define a controller in AngularJS.

Validations :

Angular provides various form validations. We will discuss a basic one here.

Keep in mind to give a form name to your form. Also, add novalidate flag to your form element. This will remove all browser validations.

<form name="userForm" novalidate>

Next to add any of the form validation remarks:

• Required – required, to make the value of an element mandatory.
• Minlength – ng-minlength=20, to give a minimum count of entered value.
• Maxlength – ng-maxlength=20, to give a maximum count of entered value.
• Email – type=”email”, will add email validation.
• Number – type=”number”, will add number validation.
• URL – type=”Url”, will accept value in URL format.

<form class="form-horizontal" ng-submit="submitForm()" role="form" name="userForm" novalidate>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Name:</label>
<div class="col-sm-5">
<input type="text" ng-minlength="3" ng-model="name" class="form-control" id="name" placeholder="Enter name" required>
</div>
</div>
...
</form>

Form name is ‘userForm‘ and we will call function submitForm() on submission. The input box has some validations placed.
We are having an input field with its name bound by ng-model to the object name on the $scope object.
ng-model – Binds the view into the model,using controller.
Scope is the glue between application controller and the view. It refers to the application model.

Sign Up Form with validations binded with a controller can be viewed here.

Now, to submit the form only when all fields are valid, add formName.$valid:
ng-submit=”submitForm(userForm.$valid)”

<div ng-controller="FormController">
<form class="form-horizontal" ng-submit="submitForm(userForm.$valid)" role="form" name="userForm" novalidate>
...
</form>

Next, to add an action notifying the user that his form is successfully submitted, we hit an angular controller.

app.controller('FormController' , function($scope){
$scope.submitForm = function(isValid) {
if(isValid) {
alert('Congratulations! you registration has been successful')

$scope.name=""; //to empty the input box after successful submit
$scope.username="";
$scope.email="";
$scope.pwd="";
$scope.password="";
}
}
});

We created a function for form submit within an angular Controller and pass the same controller into the DOM element we wish to take into consideration.

Angular Controller is build with the following syntax :

angular.module(‘firstApp’, [])
.controller(‘CtrlName’, function($service_object){
$service_object.functionName = function(){
……..
}
}

You can even add custom validation messages on the form :

<input type="text" name="userName" ng-model="username" ng-minlength=3 ng-maxlength=10 required />
<div class="validate" ng-show="userForm.username.$dirty && userForm.username.$invalid">
<small class="errorMessage" ng-show="userForm.username.$error.required">
UserName is required.
</small>
<small class="errorMessage" ng-show="userForm.username.$error.minlength">
UserName should be at least 3 characters
</small>
<small class="errorMessage" ng-show="userForm.username.$error.maxlength">
UserName cannot exceed 8 characters
</small>
</div>
<button type="submit" ng-disabled="userForm.$invalid">Submit</button>

ng-show/ng-hide : show/hide the DOM elements, if the form is invalid.
ng-disabled : To disable the button till all the input fields get valid.

Some other angular properties used here are :

$valid – formName.elementName.$valid : True, if form valid
$invalid – formName.elementName.$invalid : True, if form invalid
$error – formName.elementName.$error.validation : includes all validations residing within it.
$dirty – formName.elementName.$dirty : To display errors only if user modified the input field.

and even more to explore.

Reference : http://www.ng-newsletter.com/posts/validations.html

and for above code can checkout here.

Watch out for the next part of this blog – the RESTful Angular. Coming soon !!