Angular 6 Forms Validation Example - [Required, Email, URL, Dropdown and Min-Max min-length]

In this article, I will show you how to setup form validation in Angular 6.  Also, I am using a simple registration form with standard fields –

1.       Name

2.       Email

3.      Gender

4.      Country

5.      Site URL

6.      Password

All fields are required, plus the email field must be a valid email address, site URL field must be a valid URL and the password field must have a min-length of 6.

Steps involved as following –

1.       Create a project with the help of CLI command – ng g new Project_Name

2.       Go to the created project directory

3.      Create customer components with the help of CLI command – ng g component comp_name

4.      Import the FormsModule, RouterModule, CustomerComponent, routing for navigating add customer page in the NgModule.

5.      Finally come to app.module.ts

6.      Result

The following Examples as–

Create a project

ng g new ng6FormValidation

Create customer components –

customer.component.ts –

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

@Component({

  selector: 'app-customer',

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

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

})

export class CustomerComponent implements OnInit {

  model: any = {};

  countries : any;

  constructor() {

   }

  ngOnInit() {

    //Get country list.

    this.countries =[

      {"id" :1, "name": "India", "code":"IN"},

      {"id" :2, "name": "Nepal", "code":"NP"},

      {"id" :3, "name": "United Arab Emirates", "code": "AE"},

      {"id" :4, "name": "United Kingdom", "code": "GB"},

      {"id" :5, "name": "United States", "code": "US"},

      {"id" :6, "name": "Australia", "code": "AU"},

      {"id" :7, "name": "Austria", "code": "AT"},

      {"id" :8, "name": "Canada", "code": "CA"},

      {"id" :9, "name": "China", "code": "CN"},

    ];

   //Default selected country Id.

   //this.model.country = 5;

  }

  public onSubmitCustomer() {

    alert('Your information has been submitted successfully. :-)\n\n' + JSON.stringify(this.model))

  }

}

And customer.component.html –

<h1>Register Customer</h1>

<hr>

<form name="form" (ngSubmit)="f.form.valid && onSubmitCustomer()" #f="ngForm" novalidate>

  <div class="container">

    <label for="name"><b>Emp Name</b></label>

    <input type="text" placeholder="Enter Name" name="name" [(ngModel)]="model.name" #name="ngModel" [ngClass]="{ 'is-invalid': f.submitted && name.invalid }" required>

    <div *ngIf="f.submitted && name.invalid" class="invalid-text">

      <div *ngIf="name.errors.required">Name is required</div>

    </div>

    <label for="email"><b>Email</b></label>

    <input type="text" placeholder="Enter Email" name="email" [(ngModel)]="model.email" #email="ngModel" [ngClass]="{ 'is-invalid': f.submitted && email.invalid }" required email>

    <div *ngIf="f.submitted && email.invalid" class="invalid-text">

      <div *ngIf="email.errors.required">Email is required</div>

      <div *ngIf="email.errors.email">Email must be a valid email address</div>

    </div>

    <label for="gender"><b>Gender</b></label>

    <select placeholder="Select Gender" name="gender" [(ngModel)]="model.gender" #gender="ngModel" [ngClass]="{ 'is-invalid': f.submitted && gender.invalid }" required>

      <option>Male</option>

      <option>Female</option>

      <option>Other</option>

    </select>

    <div *ngIf="f.submitted && gender.invalid" class="invalid-text">

      <div *ngIf="gender.errors.required">Gender is required</div>

    </div>

    <br>

    <label for="country"><b>Country</b></label>

    <select placeholder="Select country" name="country" [(ngModel)]="model.country" #country="ngModel" [ngClass]="{ 'is-invalid': f.submitted && country.invalid }" required>

      <option *ngFor="let country of countries" [value]="country.id"> {{country.name}}</option>

    </select>

    <div *ngIf="f.submitted && country.invalid" class="invalid-text">

      <div *ngIf="country.errors.required">Country is required</div>

    </div>

    <br>

    <label for="site"><b>Site URL</b></label>

    <input type="url" placeholder="Enter site URL" name="site" pattern="https?://.+" [(ngModel)] ="model.site" #site="ngModel" [ngClass]="{ 'is-invalid': f.submitted && site.invalid }"  required url>

    <div *ngIf="f.submitted && site.invalid" class="invalid-text">

      <div *ngIf="site.errors.required">Site is required</div>

      <div *ngIf="site.errors.pattern">Must be a valid site URL</div>

    </div>

    <label for="psw-repeat"><b>Password</b></label>

    <input type="password" placeholder="Password" name="pwd" [(ngModel)]="model.pwd" #pwd="ngModel" [ngClass]="{ 'is-invalid': f.submitted && pwd.invalid }" required minlength="6">

    <div *ngIf="f.submitted && pwd.invalid" class="invalid-text">

      <div *ngIf="pwd.errors.required">Password is required</div>

      <div *ngIf="pwd.errors.minlength">Password must be at least 6 characters</div>

    </div>

    <hr>

    <p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>

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

  </div>

  <div class="container signin">

    <p>Already has an account? <a href="#">Sign in</a>.</p>

  </div>

</form>

Import the FormsModule, RouterModule, CustomerComponent, routing for navigate add customer page in the NgModule. Now the NgModule looks like.

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import {FormsModule} from '@angular/forms';

import {RouterModule} from '@angular/router';

import { AppComponent } from './app.component';

import { CustomerComponent } from './customer/customer.component';

@NgModule({

  declarations: [

    AppComponent,

    CustomerComponent

  ],

  imports: [

    BrowserModule,

    FormsModule,

    RouterModule.forRoot([{

      path:'customer-link', component:CustomerComponent }

    ])

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

Result looks like –

SHARES

Share

Pin it

Tweet

Share

Share

Share

Buffer

Print

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link.. My Blogs - https://code-sample.com and https://code-sample.xyz My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7) My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.