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.

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 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)”

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

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(){
……..
}
}

Web Application

You can even add custom validation messages on the form :

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 !!

Written by 

Principal Architect at Knoldus Inc

1 thought on “Web Application using rest in AngularJS – Part-2

Leave a Reply

%d bloggers like this: