Angular 8 | Template Driven Form Validation Tutorial by Example

In this tutorial, we will discuss how to add a form using Angular Material Form controls with validation. The form will have a text field, select dropdown and radio control to select an option from.

In Angular we have two types of Forms available:

Template Driven Form
Reactive Forms

Here we will focus on creating Angular Template Driven Form with required controls and Validation behavior. Let’s implementation from start by creating a new Angular 8 project than adding Angular Material to it.

Create an Angular Project

Make sure you have the latest version of Angular CLI installed.

Create a new project using Angular CLI tool by running following command

Install Angular Material

As we are creating a v8 Angular project, so we need the same version for Angular Material. Run following NPM command to install Angular Material and it’s dependencies


Configure Material Animations

Next, open app.module.ts file to import BrowserAnimationsModule then add it in imports array to enable animation for Material components.

Add Material Theme

To add a theme of Material in the project, open styles.css file then import one of the theme file used to style Material components.

We are done with Angular material installation and configurations.

Import Material Modules

To use Angular Material form controls, we need to import them in the app’s module file so that they are available anywhere in our application.

In our Form, we will be having Input, Select Dropdown, Radio buttons and also Form field module used to wrap textarea, input, select, etc.

Also, we have used SnackBar, it is like a toast message which shows information message to the user on a floating container on view.

So after making the required imports, our app.module.ts file will look like this:

If you notice above, we also having FormsModule, as we will use the ngForm directive to control form validation.

Add Form and Form Controls

Finally, we are ready to add a form in App component template app.component.html file

In form tag (ngSubmit) event handler is calling the submitForm method to handle form data.

<mat-form-field> is used to wrap some of the controls like here we wrapped Input and Select. But we can’t use it to wrap Radio controls.

That’s why we added a custom validation handler login on <mat-radio-group> by wrapping it in a custom div with ngClass.

For Radio Group validation to show red color text we need to add some CSS in styles.css making it highlight if the value is not selected.

In the app.component.ts file, we have a list of designation options and submitFrom method which will check if the form is valid using template variable reference we got using @ViewChild

The form will look like this:

Conclusion: We discussed how to implement a simple template-driven form using Angular Material controls with validation. Here we also added Radio group with validation using custom class.

Leave a Reply

Notify of