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.

Copy to Clipboard

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

Copy to Clipboard

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.

Copy to Clipboard

Define User Model Class

Let’s add required properties inside User model class.

Copy to Clipboard

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.

Copy to Clipboard

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.

Copy to Clipboard

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.

Copy to Clipboard

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

Copy to Clipboard

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.

Copy to Clipboard

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.

Copy to Clipboard

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

Copy to Clipboard

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

Copy to Clipboard

Form Submit Event

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

Copy to Clipboard

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

Copy to Clipboard

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.

Copy to Clipboard

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.

Copy to Clipboard

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

Copy to Clipboard

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.

Copy to Clipboard

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

Step By Step Video Tutorial