Form Validation In Angular

Form Validation

  • Form validation is an important part of web application.
  • It is used to validate whether the user input is in correct format or not.
  • It is very common that the users will make mistakes when filling out the web form

Template-driven Form Validation

  • Validations in Template-driven forms are provided by the Validation directives.
  • The Angular Forms Module comes with several built-in validators.
  • You can also create your own custom Validator.

Disabling the Browser validation

  • First, we need to disable browser validator interfering with the Angular validator.
  • To do that we need to add novalidate attribute on element

Built-in Validators

The Built-in validators use the HTML5 validation attributes like required, minlength, maxlength & pattern.

Useful Properties

  • touched
  • untouched
  • valid
  • invalid
  • dirty
  • pristine

Source Code

tdf.component.html File Code

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="bg-primary p-3 text-center">
                <h2>Template Driven Form</h2>
            <form #newForm="ngForm" (ngSubmit)="save(newForm.value)" novalidate>
                {{ newForm.value | json }}
                {{std | json}}
                <div class="form-group">
                    <label for="">Enter Name: </label>
                    <input type="text" minlength="3" maxlength="15" []="name.touched && name.invalid" required #name="ngModel" name="name" [(ngModel)]="" class="form-control" placeholder="Enter Name" ngModel>
                <div class="alert alert-danger" *ngIf="name.touched && name.invalid">
                    <div *ngIf="name.errors && name.errors['required']">
                        Name is Required
                    <div *ngIf="name.errors && name.errors['minlength']">
                        3 Characters Must
                <!-- Dirty = {{name.dirty}}
                Pristine = {{name.pristine}} -->
                <!-- Valid = {{name.valid}}
                Invalid = {{name.invalid}} -->
                <!-- Touched = {{name.touched}}
                Un-Touched = {{name.untouched}} -->
                <div class="form-group">
                    <label for="">Enter Age: </label>
                    <input type="number" required min="10" max="50" #age="ngModel" []="age.touched && age.invalid" name="age" [(ngModel)]="std.age" class="form-control" placeholder="Enter Age" ngModel>
                <div class="alert alert-danger" *ngIf="age.touched && age.invalid">
                    <div *ngIf="age.errors && age.errors['required']">
                        Age is Required
                    <div *ngIf="age.errors && age.errors['min']">
                        Age must be greater or equal to 10
                    <div *ngIf="age.errors && age.errors['max']">
                        Age must be lesser or equal to 50
                <div class="form-group">
                    <label for="">Enter Email: </label>
                    <input type="text" required pattern="^([\w\.\-]+)@([\w\-]+)((\.(\w){2,3})+)$" name="email" #mail="ngModel" []="mail.touched && mail.invalid" [(ngModel)]="" class="form-control" placeholder="Enter Email" ngModel>
                <div class="alert alert-danger" *ngIf="mail.touched && mail.invalid">
                    <div *ngIf="mail.errors && mail.errors['required']">
                        Email is Required
                    <div *ngIf="mail.errors && mail.errors['pattern']">
                       Invalid Email
                <div class="form-group">
                    <label for="">Enter Password: </label>
                    <input type="text" required pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" name="pass" #pass="ngModel" []="pass.touched && pass.invalid" [(ngModel)]="std.pass" class="form-control" placeholder="Enter Password" ngModel>
                <div class="alert alert-danger" *ngIf="pass.touched && pass.invalid">
                    <div *ngIf="pass.errors && pass.errors['required']">
                        Password is Required
                    <div *ngIf="pass.errors && pass.errors['pattern']">
                       Please enter Strong Password
                <div class="d-grid">
                    <input type="submit" [class.disabled]="newForm.form.invalid" value="Submit" class="btn btn-primary">

student.ts Model Class

export class Student {
        public name?:string,
        public age?:number,
        public email?:string,
        public pass?:string
    ) {  }

tdf.component.ts File Code

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

  selector: 'app-tdf',
  templateUrl: './tdf.component.html',
  styleUrls: ['./tdf.component.css']
export class TdfComponent implements OnInit {

  constructor() { }

  std = new Student()

// console.log(formData.value);
// console.log(formData);
// const std = new Student(, formData.age,;
// console.log(std);

  ngOnInit(): void {


app.module.ts File code

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

import { AppComponent } from './app.component';
import { TdfComponent } from './tdf/tdf.component';
import {FormsModule} from '@angular/forms';

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

Download Notes Of This Blog From the link given below

Download Source Code of This Blog From the link given below

No responses yet

Leave a Reply

Your email address will not be published. Required fields are marked *