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: [
BrowserModule,
FormsModule
],


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>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" name="password" ngModel>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Phone" name="phone" ngModel>
</div>


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


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


form{
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


{
Path:'register',
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';

Register(regForm:NgForm){
console.log(regForm);
}


Now lets display the submitted data


<h2>Sumitted Data</h2>
<p>{{data.firstname}}</p>
<p>{{data.lastname}}</p>
<p>{{data.email}}</p>
<p>{{data.password}}</p>
<p>{{data.phone}}</p>


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