In this video we are going to learn about Template Driven Forms
Template driven forms are simple forms, which can be used to develop forms.
These are called template-driven as everything that we are going to use in the application is defined in the template that we are defining along with the component.
Lets see how can we create Template Driven Forms in Angular 10
First of all We need to import the FormsModule into the Application module file
So switch to project and here just open app.module.ts file And here just type

import {FormsModule} from '@angular/forms'

Now add this it into imports array

imports: [

Now lets create a new component
So switch to the command prompt
And here just type command for creating new component
So just type here

ng g c components/register

Ok, register component has been created
Now switch to the project and just open register.component.html file
and here just add a form

<div class="containern">
<div class="row">
<div class="col-md-6 offset-md-3">
<form #regForm='ngForm' (ngSubmit)="Register(regForm)">
<h2 class="text-center">Registration page</h2>

<div class="form-group">
<input type="text" class="form-control" placeholder="First Name" name="firstname" ngModel > </div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Last Name" name="lastname" ngModel > </div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email" name="email" ngModel>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" name="password" ngModel>
<div class="form-group">
<input type="text" class="form-control" placeholder="Phone" name="phone" ngModel>

<div class="text-center">
<button type="submit" class="btn btn-primary">Register</button>

Now add css for the form
So just open register.component.css file

border-radius: 5px;
background-color: #00cfff;
padding: 20px;

Now go to the app-routing.module.ts file and here just create route for the
register component
So here

Import {RegisterComponent} from './components/register/register.component’;

Now add the route as following

Component:Register Component

Now add link to the navbar
So open app.component.ts file
And here just add the link
Now lets check it
So switch to the browser and here you you can see the register link
Now click on it
And here you can see the form
Now just go to the register.component.ts file
And here
Just import the ngForm

import { NgForm } from '@angular/forms';


Now lets display the submitted data

<h2>Sumitted Data</h2>

So in this way you can create template driven form in angular 10