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

student.ts Model Class

export class Student {
    /**
     *
     */
    constructor(
        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';

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

  constructor() { }

  std = new Student()

save(formData:any){
// console.log(formData.value);
// console.log(formData);
// const std = new Student(formData.name, formData.age, formData.email);
// console.log(std);
console.log(this.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';

@NgModule({
  declarations: [
    AppComponent,
    TdfComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Download Notes Of This Blog From the link given below

https://www.mediafire.com/file/xs4kvxjp3cew1hi/37+-+TDF+FORM+VALIDATIONS.pptx/file

Download Source Code of This Blog From the link given below

https://www.mediafire.com/file/9xkpj5e55fzobia/my-form2.rar/file