Angular Forms

In This Blog, You are going to learn Angular Forms and these approaches. By using Angular Forms you can do Form Handling In Angular.


  • Angular Components
    • Component Class
    • HTML Template
  • Two-Way Data Binding
  • Template Reference Variable

Angular Forms

  • Angular forms are used to handle user’s input.
  • We can use Angular form in our application to enable users to login, to update profile, to enter information, and to perform many other data-entry tasks.

Forms In Angular

  • In Angular, there are 2 approaches to handle user’s input through forms:
    • Template-driven forms
    • Reactive forms (Model Driven Forms)
  • In Angular, both approaches are used to collect user input events from the view, validate the user input, create a form model and data model to update, and provide a way to track changes.

Template Driven Forms In Angular

  • In Angular, Template-driven forms are best if you want to add a simple form to your application. For example: login, contact, signup form.
  • In Angular, Template-driven forms are easy to use in the application but they are not as scalable (expandable / upgradable) as Reactive forms.
  • In Angular, Template-driven forms are mainly used if your application’s requires a very basic form and logic. It can easily be managed in a HTML template.
  • In Angular, Template driven forms is created using directives in the template. Example: ngForm, ngModel
  • Basic HTML validations can be used to validate the form fields. Example: required, maxlength, minlength, pattern.
  • In the case of custom validations, directives can be used.
  • In Angular, Template-driven forms are less explicit.
  • They are created in HTML template.
  • They are created by directives.
  • It works like Asynchronously
  • Controls can be added to the form using the ngModel directive.

Reactive Forms In Angular

  • In Angular, Reactive forms are more robust.
  • They are created in component class.
  • In Angular, Reactive forms are more scalable, reusable, and testable.
  • They are most preferred to use if forms are a key part of your application.
  • In Angular, Reactive forms are more explicit (manual).
  • It works like Synchronously
  • In Angular, Reactive forms are code-driven, unlike the template-driven approach.
  • In Angular, Reactive forms eliminate the anti-pattern of updating the data model via Two-Way data binding.

Source Code Of Template Driven Forms

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)">
                <div class="form-group">
                    <label for="">Enter Name: </label>
                    <input type="text" name="name" class="form-control" placeholder="Enter Name" ngModel>
                <div class="form-group">
                    <label for="">Enter Age: </label>
                    <input type="number" name="age" class="form-control" placeholder="Enter Age" ngModel>
                <div class="form-group">
                    <label for="">Enter Email: </label>
                    <input type="text" name="email" class="form-control" placeholder="Enter Email" ngModel>
                <div class="d-grid">
                    <input type="submit" value="Submit" class="btn btn-primary">

tdf.component.ts File Code

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

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

  constructor() { }

// console.log(formData.value);

  ngOnInit(): void {


index.html File Code

<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

app.component.html File Code


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 *