Angular Form Validation (Email , Username and Password)

Form Validation, in general, will help us to improve data accuracy and prevent inconsistent data. This article will illustrate how to perform Form Validation for INPUTS [email, name, password, password confirmation and form submit].

Below is a simple registration form

The form above has the source code below.

<form>

  <div>

    <input name="fullname" type="text" placeholder="fullname"  required>

  </div>

  <div>

    <input  type="text"  required name="username" placeholder="Username" />

  </div>

  <div >

    <input  type="email"  required name="email" placeholder="Email Address" />

  </div>

  <div >

    <input  type="password" name="password" required  minlength="6"

 placeholder="Password" />

  </div>

  <div >

    <input  type="password" name="passwordConfirm" required

  minlength="6"  placeholder="Confirm password" />

  </div>

  <button type="submit">register </button>

</form>

Next, we will create a model for the above form. Note the model under the contractor and the email Regex to validate form email input from users. Our model consists of a full name, username email, and password.
I have also created a method [registerUser]. the method will log form values.

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

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent  implements OnInit{
title = 'testapp';

 emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))

@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+

[a-zA-Z]{2,}))$/;

  constructor() { }

  model = {

    fullname :'',

    username : '',

    email : '',

    password :'',

    password_conf:''

  }

  ngOnInit() {

  }

  registerUser(){

    console.log(this.model);

  }

}

Next, we will bind our Html form inputs to our model and assign a template name to each input.

<!-- reg form  blog-->

<form class="form" #regForm="ngForm" (submit)="regForm.valid && registerUser(regForm)">

  <div>

    <input #fullname name="fullname"  #fullname="ngModel" [(ngModel)]="model.fullname"

     type="text" placeholder="fullname"  required>

  </div>

  <div class="error" *ngIf="(regForm.submitted || fullname.touched)  && !fullname.value"

    class="error">

    <small >fullname is required</small>

  </div>

  <div>

    <input #username type="text" [(ngModel)]="model.username"

       name="username"  #username="ngModel" placeholder="Username" />

  </div>

  <div class="error" *ngIf="(regForm.submitted || username.touched)  && !username.value">

    <small >username is required</small>

  </div>

  <div >

code
    <input type="email"  #email="ngModel" [(ngModel)]="model.email"  [pattern]="emailRegex"

       name="email" placeholder="Email Address" required >

  </div>

  <div *ngIf="(regForm.submitted || email.touched)  && email.errors" class=" error">

    <small *ngIf="!email?.value" >email is required</small>

    <small *ngIf="email?.errors.pattern" >email must be valid.</small>

  </div>

  <div >

    <input  type="password" name="password"  required

     #password="ngModel" minlength="6"  [(ngModel)]="model.password"

    placeholder="Password">

</div>

<div *ngIf="regForm.submitted && password.errors" class=" error">

    <small *ngIf="!password?.value">password is required</small>

    <small *ngIf="password?.errors.minlength">password must be at least 6 </small>

  </div>

  <div >

    <input  type="password"  #password_conf="ngModel" #password_conf [(ngModel)]="model.password_conf"

     name="password_conf"    placeholder="Confirm password" />

  </div>

  <div *ngIf="( password_conf.value && password.value != password_conf.value)"

      class="error">

      <small class="font-weight-bold">password not matched!</small>

                          </div>

  <button

   class="button" type="submit">submit </button>

</form>

Form will be submitted to [registerUser] (submit)="registerUser()". The first input is
[fullname] bind to model.fulllname also applied to all input. The div below [#fullname] is our validation. Note
the password input with minlength and email input with [regex] validation.

The CSS code below is a code snippet for the registration form.

.form{

  text-align: center;

  }

  input {

    width: 50%;

    padding: 12px 20px;

    margin: 8px 0;

    box-sizing: border-box;

    border: 2px solid rgb(4, 0, 255);

    border-radius: 4px;

  }

  .error{

    color: red;

    text-align: center;

  }

  .button {

    background-color: rgb(101, 80, 194);

    border: none;

    color: white;

    padding: 15px 32px;

    text-align: center;

    /* text-decoration: none; */

    display: inline-block;

    font-size: 16px;

    margin: 4px 2px;

  }