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.
    <input name="fullname" type="text" placeholder="fullname"  required>

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

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

  <div >
    <input  type="password" name="password" required  minlength="6"
 placeholder="Password" />

  <div >
    <input  type="password" name="passwordConfirm" required
  minlength="6"  placeholder="Confirm password" />

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

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 { ComponentOnInit } from '@angular/core';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent  implements OnInit{
  title = 'testapp';
 emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))

  constructor() { }

  model = {
    fullname :'',
    username : '',
    email : '',
    password :'',

  ngOnInit() {


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)">
    <input #fullname name="fullname"  #fullname="ngModel" [(ngModel)]="model.fullname"
     type="text" placeholder="fullname"  required>
  <div class="error" *ngIf="(regForm.submitted || fullname.touched)  && !fullname.value"
    <small >fullname is required</small>

    <input #username type="text" [(ngModel)]="model.username"
       name="username"  #username="ngModel" placeholder="Username" />
  <div class="error" *ngIf="(regForm.submitted || username.touched)  && !username.value">
    <small >username is required</small>

  <div >
code     <input type="email"  #email="ngModel" [(ngModel)]=""  [pattern]="emailRegex"
       name="email" placeholder="Email Address" required >
  <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 >
    <input  type="password" name="password"  required
     #password="ngModel" minlength="6"  [(ngModel)]="model.password"
<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 >
    <input  type="password"  #password_conf="ngModel" #password_conf [(ngModel)]="model.password_conf"
     name="password_conf"    placeholder="Confirm password" />
  <div *ngIf="( password_conf.value && password.value != password_conf.value)"
      <small class="font-weight-bold">password not matched!</small>

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

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.

  input {
    padding12px 20px;
    margin8px 0;
    border2px solid rgb(40255);

  .button {
    padding15px 32px;
    /* text-decoration: none; */
    margin4px 2px;

Next, I submitted the form without any input. note the error.

Next, I entered full name, username, and a fake email address and move to the next input. i
 got the error [email must be valid].

Next,  I entered a password not up to six characters.

Next a wrong password.

If you find it helpful you can share it with your friends.

Post a comment