Angular 2 Forms : User Registration

 

This article covers how to store user-entered values into the Mongo DB by using Angular 2 form component’s, as part of this I have created two components which are registration and thank you component’s, the registration component takes user information and stores into the database, once the user registration is successful, using angular 2 routes the system will automatically redirect to the thank you component by displaying success message

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 below commands, the generated angular 2 component and project structure is something like as shown in fig

angular2component

Creating register REST API

I am using meanjs to create rest api’s but, if you have your own rest URL to store user information, then you can skip this section 

Here, I am using meanjs to create register api, once we hit the register api the below server controller will execute and it takes username, password, and email address as parameters and checks if user is already exists or not if not then it will save user information

In the server routes of meanjs application, we need to define below route URL, then only we can call register api by hitting this http://<domainname>/register

Now, the rest api is ready to store user information, we need to make a request to this rest api by creating new angular 2 registration service, the next section’s covers how to create services and components

Angular 2 Registration Service

The registerUser method of angular 2 services accepts user object as a parameter which is passed down from the registration component when we click on submit button, the HTTP module takes user object, rest API URL and make a post request to the server and returns response in the form of JSON

Registration Component

There are two methods in the registration component ngOnInit() and register() method, the ngOnInit() is used to initialize user object and register method is used to call registrationService.registerUser() method by passing user object and based on the response status  it redirects to the thankyou page

 

Angular 2 Registration Template

I am using below HTML code to render view for the registration component, in the generated registration folder you will find “registration.component.html” file, what you can do is just copy and paste the below code in it

Here, I am using angular 2 two-way data binding to get the user details in the controller, the syntax for the two way data binding is banana in the box [(ngModel)] and on click of the form submit button I am calling “register()” method

Thank You Component Template

The below HTML code will render the view for thank you component, there is no dynamic functionality is involved so we are not using any binding’s here

Thank You Component

The thank you component does not do any operation it just render the view which is called in the metadata of the component

Creating Angular 2 routes

I am defining only one route here which is for thank you component, you can write routes like this:

To install routes we need to use “RouterModule.forRoot()”, in the app.module.ts imports section we need to call routes object something like below

index.html

call the selectors in the index.html file

After executing “ng serve” command the output will be something like below

angular2forms