User Registration in Angular 8/9 in MEAN Stack

Posted at: April 3, 2020 6:45 PM

In this lesson we will learn, user sign-up or registration in MEAN Stack(MySQL, Express.js, Angular, Node.js). Need to read previous lesson Routing, Lazy Loading, Multiple Layouts in Angular 8 for related source code of this lesson. I have used in this lesson reactive form, form validation, custom validation, etc. In user sign-up we have used some features like as match password and confirm password, password encryption, etc.

You can see all lessons here MEAN Stack Tutorial.

Create User Registration API in Node.Js

First we will work in Node.js for create an API for user registration.

Installation of bcrypt

Install bcrypt module for password encryption.

Create Model File

Need to create a model file for database mysql query execution. Now create a file auth-model.js in models folder

models/auth-model.js

Create Route File

Create a auth.js route file in routes folder.

In this file now import var authModel = require('../models/auth-model'); for database access and var bcrypt = require('bcrypt'); for password encryption.

routes/auth.js

Edit app.js

Edit app.js file for create a router of route file routes/auth.js

app.js

Complete code of app.js

Fronted Angular 8

Create user registration form, services, models etc.

User Model

Create a user interface auth/models/user.ts for typed data and define all user fields.

Auth Service

Create a service file auth/services/authService and create a method signup for user registration.

auth.module.ts

Import import { ReactiveFormsModule } from '@angular/forms'; for creating reactive forms.

src/app/auth/auth.module.ts

auth-routing.module.ts

src/app/auth/auth-routing.module.ts

Signup Component

src/app/auth/signup/signup.component.ts

import { FormBuilder, FormGroup, Validators } from '@angular/forms'; for create reactive form.

import { Router } from '@angular/router'; to navigate another url

import { User } from '../models/user'; for typed data.

import { passwordMatchValidator } from '../../shared/validators/password-match'; this is custom validation for match the password and confirm password.

import { AuthService } from '../services/auth.service'; subscribe service for user signup.

src/app/auth/signup/signup.component.html

Custom Validator

Create a file src/app/shared/validators/password-match.ts for custom validation of match the password and confirm password.

styles.css

Add this line .error { color: #ff0000} for error message.

src/styles.css

Conclusion

In this lesson we have learnt to create singup or user registration in MEAN with features, reactive forms, form validation, custom form validation, creates an interface for typed data and use services of node.js.

This lesson also available on YouTube
user registration in mean stack mean stack login and registration angular 8/9 mean stack authentication and authorization mean stack jwt authentication angular 8 user registration angular 8/9 registration login example user registration in angular 8/9

More Posts - MEAN Stack

Please leave comments

3 Comments