Implementing AngularJS Forms and Validation

AngularJS offers an easy implementation of forms and their validations. If AngularJS sounds new to you, read our blog post, “Introduction to AngularJS Framework“.

Getting Started

For this blog, we are going to plug AngularJS to a simple Ajax submitted signup form.

Yes, the page doesn’t have any labels. Let’s just leave it like that for now.

Initializing AngularJS

To make it an AngularJS application, we have to declare the ngApp directive in the tag of our document.

Then declare the app in our javascript.

	var signUpModule = angular.module('signUpModule');

Creating the Controller

Now let’s create a new controller and name it FormController.

    signUpModule.controller('FormController', function($scope){
        $scope.formData = {};
    });

Note: This is another way of declaring a controller. We can also create a controller just by creating a function named FormController. The purpose of doing this approach is for having the controllers collected in a single module and abstract it to other modules. This way, same controller names but different modules will have no conflicts at all.

After declaring FormController in our script, we tell the form to use it using the ngController directive.

Binding formData Object to the Form

Now we want to bind the formData object in our controller to the form. This object will be the representation of the form in javascript and will contain the values the user will provide in the page. We can do this by applying the ngModel directive in the text fields in our form.

We just have to make sure that formData object is declared inside the $scope object so that angular will see it. Thanks to the two-way binding feature of AngularJS we won’t have to manually initialize each of the fields of the formData with the values in the form every time the user changes something. It’ll just be automatically assigned like magic.

Implementing Form Submission

Now we do the submission part of the form via Ajax. First off, we’ll create a function that’ll be called upon submit. Yes, it should be inside the controller function and be bound in the $scope object.

Here’s what our controller will gonna be:

    signUpModule.controller('FormController', function($scope, $http){
        //initialize formData
        $scope.formData = {};
        //initialize submit function
        $scope.submitForm = function(){
            var data = this.formData;
            //TODO do ajax call and handle invalid or successful signups.
        }
    });

Form Validation

Before we continue, let’s add a name for our forms and the fields inside it. Names will now be important to identify the states and errors of the form and its fields. Let’s also add the attribute required to signify that the fields are required.

To disable form submission, we must add the ngDisabled directive to the submit button. Its value should be a boolean expression.

$invalid is a boolean flag bound in the signUpForm (the name of our form). It turns true if there are errors in the fields of the form. Checking the fields if empty is the first validation in our code. We’ve done this by adding the attribute named “required”. AngularJS will automatically toggle the $invalid flag to true if there are empty fields with “required” attribute.

Displaying an Error Message

To display an error message, we must add the message and just toggle its display by using the ngShow directive.

For the username field we’re gonna declare:

• $dirty turns true if the field had been focused and its value has been changed. It is the opposite of $pristine which is true if the field has never been focused and has never been changed.
• $error is an object which contains all the errors of its identifier. In the code, we checked if the error of username is because of the empty field being required.

Other Validation

Some of the common directives used for validation are the ff:

• email – Validate that the input is an email.Usage:

• number – Validate that the input is a number.Usage:

• ngMinlength – Validate that the input is at least n number of characters.Usage:

• ngMaxLength – Validate that the input is not more than n number of characters.Usage:

• ngPattern – Validate that the input matches the pattern.Usage:

If you’re a client looking for a software development team for your business application , please don’t hesitate to contact us today.

Send us a message