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 { ComponentOnInit } 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-aligncenter;


  }
  input {
    width50%;
    padding12px 20px;
    margin8px 0;
    box-sizingborder-box;
    border2px solid rgb(40255);
    border-radius4px;
  }

  .error{
    colorred;
    text-aligncenter;
  }
  .button {
    background-colorrgb(10180194);
    bordernone;
    colorwhite;
    padding15px 32px;
    text-aligncenter;
    /* text-decoration: none; */
    displayinline-block;
    font-size16px;
    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

0 Comments