Creating a Log in Form using Angular Template Driven Form and Angular Material

In this article, we will explore how to create a log in form using Angular template driven form and Angular Material. We will also look at some of the new features that are available in Angular 15 forms.

Setting up the Angular Project

Before we begin creating the log in form, we need to set up a new Angular project. We can do this by using the Angular CLI tool. Here is the command to create a new Angular project:

ng new my-angular-project

After creating the project, we can navigate to the project directory and install the Angular Material library using the following command:

ng add @angular/material

Creating the Log in Form

Once the project is set up, we can start creating the log in form. We will use the Angular template driven form approach to do this. First, we need to import the necessary modules from Angular Material in the app.module.ts file:


import {MatInputModule} from '@angular/material/input';
import {MatButtonModule} from '@angular/material/button';


Then, we can use these modules in the log in form component to create the form:

With the above code, we have created a simple log in form using Angular template driven form and Angular Material. This form includes input fields for username and password, and a log in button.

New Features in Angular 15 Forms

Angular 15 comes with some new features in forms that make it easier to create and manage forms. One of the new features is the ability to create template driven forms using the ngForm and ngModel directives. This makes it easier to create forms without the need for reactive form controls.

Another new feature is the ability to use Angular Material components in forms. This allows us to create forms that are more visually appealing and have a better user experience. We can use components such as mat-input, mat-select, and mat-datepicker to create forms that look and feel great.

Conclusion

In this article, we have looked at how to create a log in form using Angular template driven form and Angular Material. We have also explored some of the new features that are available in Angular 15 forms. With these new features, it is now easier than ever to create forms in Angular that are more visually appealing and provide a better user experience.