How to submit form to server in Angular 2

 

In this article, I am going to explain how to submit form data to the server in angular 2 using model-driven reactive forms, when I was building forms in angular 1.3 for my carpooling angular application ( www.ziprides.com ), I have used template driven forms in which we need to bind every form control to ng-model and access those values in the controller using $scope object

The template-driven forms are easy to develop but hard to do unit testing because of asynchronous nature, when you want to deal with complex forms and want to do unit testing then you need to use model-driven forms

Step 1: Creating angular project

I have used Angular CLI to generate an initial project structure and  Visual Studio Code IDE for development of component’s, if you are new to Visual Studio Code IDE then I suggest you refer this article setting up visual studio code ide for angular 2

Once, the initial project structure is generated, to create new Angular 2 component’s we need to run ng generate components command, the generated angular 2 component and project structure is something like as shown in fig

angular2component

Step 2: Registration Component

Once again, I am using angular CLI to create component’s and we need to run below command to generate angular 2 registration component

Once the registration component is created then what you need to is just open the registration.component.html file and replace existing code with below angular 2 form code

here, I am using novalidate to disable form submission instead of that I am using ngSubmit to submit a form, on clicking of submit button we are calling submit function by passing form values and validation status

Here, the form control helps us to perform validations on assigned input control’s, if you see the above html code every input control has one directive called  “formControlName” which is a replacement of “ng-model” and it will take care of tracking and validations

A form group contains set of form controls which are grouped together, the group which we created here, is registrationForm, we can consider it as a form model

If you see below code we are using form builder to create a form group instance which is a registrationForm, the form builder creates instance for all input form controls, here, along with four form controls I am creating two more controls which are security question and answer and those are not tied to input form controls so I am assigning some default values to it, if you don’t assign default values then it will throw exception

By default the Angular comes with OOTB Validation’s, those are required, minlength, maxlength and regex pattern, along with that we can write our own custom exceptions, I will cover in my next article how to write custom exceptions

Step 3 : Read Form Values

You can read form field values by using this syntax this.<form name>.controls.<form control name>.value

The isValid is an important that will tell you whether the form is valid or not, if it returns true then you can submit a form to the server otherwise display the error message to the end use, refer my other this article to get to know how to post data to the server which is using template driven forms to post data

Upon clicking of form submission if the form is valid then you will see isValid = true something like below, after security questions I am displaying the form status true or false

form-submission

 

Download source code

Template driven forms 

 

 

  • Suresh K

    Nice topic babai

  • cJs

    How do you download the source?