So far, we have a good high-level understanding of what template-driven forms are. In this section, we will put our knowledge to work by building a form. Let's put together a form using the classes we have learned in the preceding section.

The use case we will work on is the user login form for our application. First, we need to generate our login component. Run the following ng command to generate the login component:

ng g c login

The output of the preceding command is displayed as follows:

We are building our form using the template-driven approach, so we will need to do most of the work in our template file. Before we start modifying our template file, we will need to import a required module into our app.module.ts file.

Open the app.module.ts file and add the following line of code:

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

Once we have imported FormsModule into our app.module.ts file, don't forget to add it to our list of imports inside ngModule.

The updated app.module.ts file is displayed as follows:

Now, let's open our login component template file and create our login form in the login.component.html file. The following is the code we will add to our template file:

<form #loginForm="ngForm" (ngSubmit)="login(loginForm.value)">
 <h3 class="text-center text-primary">Login</h3>
 <div class="form-group">
 <label for="username">Username:</label><br>
 <input type="text" [ngModel]="username" name="username" 
    class="form-control">
 </div>
 <div class="form-group">
 <label for="password">Password:</label><br>
 <input type="password" [ngModel]="password" name="password" 
   class="form-control">
 </div>

<button type="submit" class="btn btn-primary">Sign in</button>
 
 </form>

Let's analyze the preceding code in depth. We are creating a form using the HTML input elements and adding a username, password, and Submit button to the form. Important things to note are that for the form itself, we are telling the template that the form is ngForm and ngForm will group all the input elements of the form together into the #loginForm template variable. For the input elements, we have added the ngModel attribute and we specify the name attribute for the elements. 

Using ngForm, we can now easily retrieve the value of the elements inside the form. Since we have defined the local #loginForm template variable we can now use its properties easily. loginForm has the following properties:

• loginForm.value: Returns the object containing all the values of the input elements inside the form
• loginForm.valid: Returns if the form is valid or not, based on the HTML attribute validators applied in the template
• loginForm.touched: Returns true or false depending on whether the form was touched/edited by the user or not

In the preceding code, we are passing loginForm.value to the component. We can pass any of these value to the component for processing or validation. Notice that we are also calling a login method, which we need to implement in our Component class file.

Now, let's create a method in our Component class to capture the data coming in from our loginForm. We are collecting the value of the form and displaying it in the console:

import { Component, OnInit } from '@angular/core';
@Component({
 selector: 'app-login',
 templateUrl: './login.component.html',
 styleUrls: ['./login.component.scss']
})
export class LoginComponent {

constructor() { }

login(loginForm) {
 console.log(loginForm);
 console.log(loginForm.controls.username);
}
}

Run the app using the ng serve command, and we should see the output shown in the following screenshot:

This is good stuff and good progress. We will continue to use the preceding login form and add validations shortly. Let's keep digging for more information.