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
Now add this it into imports array
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
Ok, register component has been created
Now switch to the project and just open register.component.html file
and here just add a form
Now add css for the form
So just open register.component.css file
Now go to the app-routing.module.ts file and here just create route for the
register component
So here
Now add the route as following
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
Now lets display the submitted data
So in this way you can create template driven form in angular 10
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