Template Driven Forms Validation Tutorial in Angular 13+

In this tutorial, you will learn how to use angular Template Driven Forms Validation with step by step tutorial.

so, let’s get started,

What are Angular Forms?

• Angular Forms allows you to get the values the user entered, It Will also allow you to check if a form is valid or not.
• It will also allow you conditionally change the form input look by putting some red border around invalid controls.

Also read, 

• Angular Introduction: What It Is, and Why You Should Use It
• How to install Angular 13 – Tutorial
• Angular-Routing-Tutorial-Step-by-Step-from-Scratch

Angular actually offers two approaches when it comes to handing forums.

Difference between Template Driven  and Reactive Forms in angular

1.Template Driven Forms:-

In this type of form you simply set up your form in the HTML template and angular will automatically identify the structure of your forms and its control which makes it easy for you to get started quickly.

2.Reactive Forms:-

A reactive Form is a Form which created programmatically and synchronized with the DOM.

In reactive form approaches is little more complex approaches than Template Driven where you actually define the structure of the form in typescript code.

Template Driven Forms Validation Example

Step-1: Import formsmodule in app.module.ts file and also import in imports array.

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

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

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

Step- 2: Add the following code in app.component.html 

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
            <form (ngSubmit)="onSubmit(formdemo, userData)" #formdemo="ngForm">

                <div class="form-group">
                    <label for="username">Username</label>
                    <input type="text" id="username" class="form-control" [(ngModel)]="userData.username" name="username" required>
                </div>

                <div class="form-group">
                    <label for="email">Mail</label>
                    <input type="email" id="email" class="form-control" [(ngModel)]="userData.email" name="email" required email #email="ngModel">
                    <span class="help-block" *ngIf="!email.valid && email.touched">Please enter a valid email!</span>
                </div>

                <div class="form-group">
                    <label for="country">Select country</label>
                    <select id="country" class="form-control" [(ngModel)]="userData.country" name="country">
                        <option value="india">india</option>
                        <option value="usa">USA</option>
                    </select>
                </div>

                <div class="radio" *ngFor="let gender of genders">
                    <label>
                        <input type="radio" name="gender" [(ngModel)]="userData.gender" [value]="gender" required> {{ gender }}
                    </label>
                </div>
                <button class="btn btn-primary" type="submit" [disabled]="!formdemo.valid">Submit</button>
            </form>
        </div>
    </div>

</div>

Step – 3: Add the following code in app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
 
  genders = ['male', 'female'];
  
  userData = {
    username: '',
    email: '',
    country: '',
    gender: ''
  };
  submitted = false;

  
onSubmit(form,formData) {
    console.log('submitted formdata',formData);  
    
    alert('Form submitted successfully');
    
    form.reset();
  }
}

Step-4: Add following code app.component.css

input.ng-invalid.ng-touched {
  border: 1px solid red;
}

See it in action :

View Demo

Conclusion:

Thanks for reading.

Do let me know If you face any difficulties please feel free to comment below we love to help you. if you have any feedback suggestions then please inform us by commenting.