Angular Registration Login Form Validation – In this article i will explain how create and develop Angular Login Registration Form with Validation using Angular Version 8. Currently Angular launch the newest version of 9. Angular 9 has many features when compared to the previous version of 8. Small changes only applicable for source code development so you have dont worry about version. All are same, some designs only improved.

In this article we learn step by step by guide to make perfect register and login form with javascript (TypeScript) validation in Angular. Every application need login register form but when we made this angular angular language then the look will be very attractive. Because angular has more template based API features, once we called the API the code will be automatically adjusted.

Create Project Angular 8,9,14 – Angular Registration Login Form

Okay lets start the project, for develop user friendly Angular Login Registration Form. Here i have also explain how to validate forms when user submit the component or modules. Angular is entire module based application everything is divided by components so you can easily understands the template how it will be applied. If you are beginner in Angular before listen this article go through on our angular beginner tutorial for freshers.

After reading this article you got idea for build the angular application. Create one project then open code structure. In default angular develop one project when you create project sample project design will be displayed. You can also learn some concept in that code that’s why google release the sample project.

Create Three Components

In this project we need to create three components for develop Angular Login Registration form using JavaScript & typescript. When we type JavaScript code it will be automatically convert into typescript. If you are familiar in JavaScript then you can easily develop any angular application. The three components are,

1. Home Component – Homepage
2. Register Component
3. Login Component

We used Typescript for validate the form. In below i explained each components and its files like HTML CSS typescript.

Home Component

I think already u know how to create new component in Angular. Create one component name of Home. After generating the home component, four file will be automatically generated they are one HTML CSS file typescript file and testing file. First open the HTML file and add following below code. Here we bind username details.

Then open typescript file and add following code. The typescript file automatically convert JavaScript code.

import { Component, OnInit } from '@angular/core';
import { first } from 'rxjs/operators';

import { User } from '@/_models';
import { UserService, AuthenticationService } from '@/_services';

@Component({ templateUrl: 'home.component.html' })
export class HomeComponent implements OnInit {
    currentUser: User;
    users = [];

    constructor(
        private authenticationService: AuthenticationService,
        private userService: UserService
    ) {
        this.currentUser = this.authenticationService.currentUserValue;
    }

    ngOnInit() {
        this.loadAllUsers();
    }

    deleteUser(id: number) {
        this.userService.delete(id)
            .pipe(first())
            .subscribe(() => this.loadAllUsers());
    }

    private loadAllUsers() {
        this.userService.getAll()
            .pipe(first())
            .subscribe(users => this.users = users);
    }
}

Download Source Code

In above i explain only home component, we can check other module like login and register component in after downloading the source code. If you face any problem in Angular Login Registration form with validation, just comment below I will try to fix bugs.