Login form using Angular + Reactive Forms + Material UI

In this post, I’ll be explaining step by step process of creating a simple login form using Angular, Reactive Forms, Material UI.

1. Let’s start by creating a project first. I’m naming it login-form

ng new login-form

I have added routing, chosen CSS as the stylesheet format.

2. Add Material UI

ng add @angular/material

While installing, you have to choose the theme and other things. I’m going with Indigo-Pink.

You need to import the Material UI modules in app.module.ts I’ve created a separate module called MaterialModule in which I have imported all the material components. Then this module can be imported into app module.

ng g module modules/material

You can check the contents of this module in the git repository of this tutorial.

Import this in app.module.ts

import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;
import { AppRoutingModule } from ‘./app-routing.module’;
import { AppComponent } from ‘./app.component’;
import { LoginComponent } from ‘./components/login/login.component’;
import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations’;
import { MaterialModule } from ‘./modules/material/material.module’;
@NgModule({
  declarations: [
   AppComponent,
   LoginComponent
],
imports: [
 BrowserModule,
 AppRoutingModule,
 BrowserAnimationsModule,
 MaterialModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

3. Next, create a login component.

ng generate component components/login

Add the LoginComponent to Router Module(app-routing.module.ts).

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './components/login/login.component';
const routes: Routes = [
  {path: '', component: LoginComponent}
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

You can start the server and check this page. Make sure that you remove the placeholder content from app-component.html

4. Creating the Form.

In this tutorial, I’m using Reactive Forms. Import the necessary modules. Make sure to import ReactiveFormsModule in the app module.

In app.module.ts

import { ReactiveFormsModule } from ‘@angular/forms’;
imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MaterialModule,
    ReactiveFormsModule
  ],

In login.component.ts

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
export class LoginComponent implements OnInit {
 login: FormGroup;
constructor() { 
 this.login = new FormGroup({
  username: new FormControl(null,   [Validators.required,Validators.email]),
 password: new FormControl(null,[Validators.required, Validators.minLength(6)])
 });
 }
ngOnInit(): void {
 }
}

Here, I have created an instance of the form group. With this, you can manage all the form controls together. Form control is responsible for the Value and Validation of the input field. In the above code, I have created two fields, username and, password.

When creating an instance of the form control, the first parameter is its initial value, the second parameter is of validations. There are many pre-defined validations, which you can use by importing the Validators module.

Now let’s check the HTML.

<mat-toolbar color=”primary”>
 <span>Login</span>
 </mat-toolbar>
 <form [formGroup]=”login” (ngSubmit)=”submit()” autocomplete=”off”>
 <p>
 <mat-form-field>
 <mat-label> Username: </mat-label>
 <input matInput type=”text” formControlName = “username”>
 <mat-error *ngIf=”login.get(‘username’).errors && login.get(‘username’).errors.email”> Invalid E-Mail Pattern</mat-error>
 </mat-form-field>
 </p>
 <p>
 <mat-form-field>
 <mat-label> Password: </mat-label>
 <input matInput type=”password” formControlName = “password”>
 <mat-error *ngIf=”login.get(‘password’).errors”> Min length should  be 6. 
</mat-error>
 </mat-form-field>
 </p>
 <button mat-raised-button type=”submit” [disabled]=”!login.valid”>Login!</button> 
 </form>

Bind the Form Group to the form element. Bind the Form Controls to the input elements. Add matInput to the input fields, enclosed in mat-form-fields. For the button, I have used mat-raised-button. There are many more ways to style a button which you can check on the official documentation of Material UI

Material UI gives you the flexibility to handle the validation errors using the mat-error tag. Add the appropriate conditions on the mat-error tag.

For the form submission, I have added a ngSubmit. As per Angular rules, events like submission/ click should be written in round parentheses. Any property binding, like disabled on the button, should be done within a square bracket.

Now, add the submit method in our component class.

submit(){
 console.log(this.login.controls.username.value);
 console.log(this.login.controls.password.value);
 }

I have added a console log to print the values.

And, that’s all! We have created a simple login form.

You can check out the code at https://github.com/rucha412/login-form