Angular 10 Tutorial - Template Driven Forms

In this tutorial, we are going to learn about Template Driven Forms in Angular 10. Template driven forms are simple forms that 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.

Importing FormsModule

Let's see how we can create Template Driven Forms in Angular 10. First of all, we need to import the FormsModule into the Application module file. So, switch to the project and open the app.module.ts file. And here, just type:

import {FormsModule} from '@angular/forms'

Now, add this to the imports array:

imports: [
BrowserModule,
FormsModule
],

Creating a New Component

Now, let's create a new component. So, switch to the command prompt and here, just type the command for creating a new component. So, just type:

ng g c components/register

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

<div class="container">
    <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>

Adding CSS to the Form

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

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

Configuring Routing

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

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

Now, add the route as follows:

{
    Path:'register',
    Component:Register Component
}

Adding a Link to the Navbar

Now, add a link to the navbar. So, open the app.component.ts file and here, just add the link.

Now, let's check it. So, switch to the browser and here, you can see the register link. Now, click on it, and here, you can see the form.

Displaying Submitted Data

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, let's 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 a template-driven form in Angular 10.