python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
7 form validation email URL dropdown

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 –

ANIL SINGH

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions