Template Driven Form With Validation In Angular 12

Introduction

In this article, we are going to learn Template Driven Form with Validation in angular 12. We will create a simple form in that we will use inbuild validations.

Template Driven forms are mainly used for two-way data binding to update the data model in the component and Template Driven forms are asynchronous in nature.

Prerequisites:

Basic knowledge of Angular
Code editor like Visual Studio Code

Create a new Angular project by typing the following command in the VSCode terminal.

ng new template-driven-form

Now, open the newly created project and execute the command that’s given below. It will install ng-bootstrap for the default application.

ng add @ng-bootstrap/ng-bootstrap

In this demo, we will use inbuild form validation.

Create a new component by using the following command.

ng g c template-driven-demo

Open template-driven-demo.component.ts copy below code.

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

@Component({
  selector: 'app-template-driven-demo',
  templateUrl: './template-driven-demo.component.html',
  styleUrls: ['./template-driven-demo.component.scss']
})
export class TemplateDrivenDemoComponent implements OnInit {

  constructor() { }
  firstname: any;
  Email: any;
  mobileno: any;
  Password: any;
  register() {
    alert("Form Submitted");
  }
  ngOnInit(): void {
  }

}

Open template-driven-demo.component.html and copy the below code.

<div class="container">
    <div class="row">
        <div class="col-md-6 offset-md-3">
            <h3>Template Driven Form</h3>
            <form (ngSubmit)="registerForm.valid && register()" #registerForm="ngForm" class="text-center border border-light p-5">
                <div class="form-group">
                    <input type="text" name="firstname" id="firstname" class="form-control" [ngModel]="firstname" [ngClass]="{ 'is-invalid': registerForm.submitted && txtname.errors }" placeholder="Name" #txtname="ngModel" required>
                    <div *ngIf="registerForm.submitted && (txtname.errors || txtname.touched)" class="text-danger">
                        <h6 *ngIf="txtname.errors?.required">
                            Name is Required
                        </h6>
                    </div>
                </div>
                <div class="form-group">
                    <input type="text" name="mobileno" id="mobileno" class="form-control" [ngModel]="mobileno" placeholder="Mobile No" #txtMobile="ngModel" [ngClass]="{ 'is-invalid': registerForm.submitted && txtMobile.errors }" maxlength="10" required pattern="^((\\+91-?)|0)?[0-9]{10}$">
                    <div *ngIf="registerForm.submitted && (txtMobile.errors || txtMobile.touched)" class="text-danger">
                        <h6 *ngIf="txtMobile.errors?.required">
                            Mobile Number is Required
                        </h6>
                        <h6 *ngIf="txtMobile.errors?.pattern">
                            Please Enter Valid Mobile Number
                        </h6>
                    </div>
                </div>
                <div class="form-group">
                    <input type="text" name="Email" id="Email" class="form-control" [ngModel]="Email" placeholder="Email" #txtEmail="ngModel" [ngClass]="{ 'is-invalid': registerForm.submitted && txtEmail.errors }" required pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$">
                    <div *ngIf="registerForm.submitted && (txtEmail.errors || txtEmail.touched)" class="text-danger">
                        <h6 *ngIf="txtEmail.errors?.required">
                            Email is Required
                        </h6>
                        <h6 *ngIf="txtEmail.errors?.pattern">
                            Please Enter Valid Email Address
                        </h6>
                    </div>
                </div>
                <div class="form-group">
                    <input type="password" name="Password" id="Password" class="form-control" [ngModel]="Password" placeholder="Password" #txtPassword="ngModel" [ngClass]="{ 'is-invalid': registerForm.submitted && txtPassword.errors }" maxlength="20" minlength="5" required>
                    <div *ngIf="registerForm.submitted && (txtPassword.errors || txtPassword.touched)" class="text-danger">
                        <h6 *ngIf="txtPassword.errors?.required">
                            Password is Required
                        </h6>
                        <h6 *ngIf="txtPassword.errors?.minlength">
                            Minimum 5 Characters Required
                        </h6>
                    </div>
                </div>

                <button class="btn btn-outline-info btn-md btn-block" type="submit">Submit</button>
                <button class="btn btn-outline-secondary btn-md btn-block" type="reset">Reset</button>
            </form>
        </div>
    </div>
</div>

Output