AngularJS Form Submit

AngularJS Form Submit

AngularJS Form Submit

AngularJS provides us an easier way to submit the form data. Our uirement is quite similar to AJAX form submitting but AngularJS is main sensation at the moment. That is the reason behind with so many developers that is coming to AngularJS. So, I am going to build an AngularJS form submit way.
First, I will use the old way that is AJAX form submitting and then I will show you how we can develop it with AngularJS.

AJAX form submitting (Old Way)

Let’s go with the old way first.
WE know that AJAX works behind the scene .i.e. without page loading and refresh we can submit our form data. Here is the HTML code for AJAX way

And here is the jQuery code. We will not explain the AJAX method here.

For AJAX form submitting , please see my tutorial …….

AngularJS Form Submit (New Way)

Our main concern is with AngularJS form submitting. You know that the traditional HTML is using one way data binding whereas the AngularJS facilitates us with the two-way data binding.

So, here is the HTML code for AngularJS way. Don’t forget to include angularJS in the Head tag.

HTML Markup (New way)

Our form is looking like a normal HTML form but it is using extra attributes that will be used by AngularJS. Let’s have a quick look at this markup. We have three input fields and a submit button, First Name, Last Name, and Email. We are using a few directives in this markup. Let’s break down and explain a bit:

  • ng-app=” AngularSubmitForm”: this tag is used in the body and it starts the AngularJS application. So, it means that it is telling the AngularJS that everything here in this tag is the part of the application.
  • ng-controller=” FormController”: this tag is the start of AngularJS controller. Controller is a function that controls the behavior of different features in our web application.
  • ng-submit=”processForm()”: the function of this tag is to bind a function to onSubmit event.
  • ng-show: We are using this tag at four places in out App. These attributes read their value sent by AngularJS and show the success and error messages.
  • ng-model: this tag is also used at many places in our App. This is main tag for two-way data binding.
    What two way
    1- AngularJS can use anything of written in it,
    2- It can display anything that AngularJS will send to it
  • Ng-class: this directive is used to work with any expression that is evaluated true or false.

Form submission

The form submit handler in AngularJS takes care of following things:

  • It will show the errors automatically, it data is not passed the valuation process
  • If validation process is passed then it will make an object that will be sent through JSONP
  • As the response is created and evaluated, it will inform the user about its data.

Here is the code for AngularJS form submit

How it is working, let’s study it behavior.

You know that we don’t need validation functions in AngularJS because it already has these functions. AngularJS validates from itself and then submits it. Moreover, it also adds the CSS classes for valid and invalid fields.

  • angular.module(“AngularSubmitForm”, []): It defines our module and its dependencies.
  • formApp.controller(“FormController”, function ($scope, $http,$timeout ): Then define FormController. This controller will handle our form, $scope is standard. $http is the module. We will use $http for AJAX request because AngularJS works with dependency injection, so it will tell the app that what needs to do.

Download Full Source Code