User Registration Form in MEAN Stack Using Angular 6 – Front End

This article is a continuation to the previous one. In which we created a MEAN Stack Application with Node JS API for user registration. Here we extend the same project by adding client-side Angular 6 application with User Registration Form in MEAN Stack.

GitHub link up-to this article : https://goo.gl/EE2TuQ

MEAN Stack Tutorial Hierarchy

  1. CRUD Operation – Insert Update View and Delete.
  2. User Registration
    Node JS Back End.
    Angular 6 Front End (this one).
  3. JWT User Authentication
    Node JS Back End.

 

Create Angular 6 Application

Following angular-cli command will create a new angular 6 application with some default npm packages.

Application name is also Angular6 and our application structure will be as follows.

As per the structure, we have one parent user component and one child sign-up component. Inside shared folder we need to create service and model class files for user. For that we can use following angular-cli commands.

Define User Model Class

Let’s add required properties inside User model class.

In server side Node JS API, we hade one extra property SaltSecret for encrypting user password. Here in client side we don’t need that property.

Let’s Design User Registration Form

We will design the registration form using sign-up component. For that we need a property of user model inside sign-up component typescript file. For that we will start from UserService class.

Here selectedUser property is defined inside UserService Class. Now we can inject this service class inside sign-up  component, Thereby we can access the selectedUser  property for designing user registration form.

Here we injected UserService Class and we have one additional emailRegex  property for email validation .

Now I want to update styles.css with all required css rules for the entire application.

Registration form can be designed inside the sign-up.component.html as follows.

Here we have 3 input-fields for fullName, email and password with proper validations. Following validations are implemented inside the form

  • FullName – Required
  • Email – Required & Email Pattern
  • Password – Required & Min Length

This form is designed using Template Driven Approach. So we have to add FormsModule in app.module.ts file as follows.

Call Node JS API From Angular 6

Now I will create a function inside UserService class in-order to call Node JS API From the Angular 6 Application. This function will make a POST request to Node JS API to insert new user details.

Post request is made through HttpClient object and hence we need to add HttpClientModule in app.module.ts file.

apiBaseUrl is retrieved from environment.ts file. which we have stored inside the file as follows.

Form Submit Event

Now let’s implement submit event for the form element using ngSubmit directive.

onSubmit function will be called when the form as whole is valid( ie. signUpForm.valid). Now let’s define the function inside the component.

Inside the onSubmit function we called postUser function from UserService class. So that it will insert a new user in MongoDB. resetForm function is used to reset form controls to their initial state.

Two additional properties showSucessMessage & serverErrorMessages are added to show success and error notification respectively. Inorder to show these notifications, we need to add notification div elements in component html.

Routing Configuration

Before adding routing, we need add routing-outlet in proper places. So first of all I’ll replace default text from app.component.html(default component) with routing-outlet tag. As per the application structure user component will be the parent component for sign-up component. So inside the user component we need to wrap the registration form as follows.

Now let’s add a new file for routing – routes.ts.

signup route is used for user registration form and same route will shown for default route also. Now we need to add this appRoutes constant in app.module.ts using RouterModule.

In the next article we’ll implement Node JS JWT Authentication inside this same MEAN Stack Project.

Step By Step Video Tutorial

9
Leave a Reply

avatar
5 Comment threads
4 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
6 Comment authors
ZoharDesmondQadees javedSaifShamseer Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
medoxahmed
Guest
medoxahmed

you need add app.component.html file

Saif
Guest
Saif

Thanks a lot Shamseer for your Latest MEAN Stack Registration Video Series at Youtube. I really learned a lot and using it for my project. I would like to request you a bit more if possible. My requests below : 1. User gets and email after registration with an activation… Read more »

Qadees javed
Guest
Qadees javed

i want to forget password reset please extend your tutorials / project with forget password reset

Desmond
Guest
Desmond

Thanks a lot sir for the tutorial, courage with angular6.
Please can you make a tutorial with angular and node that
sends emails to a users email.? Pleeeaaase!!!

Zohar
Guest
Zohar

Hi there,

I followed each step in this tutorial and the previous one, and was planning on moving on to the next parts, but nothing happens when I click sign up in my form. Any thoughts??

Thanks a lot!