Angular

Angular Template Driven Form with example

There are mainly two ways in Angular by which you can make forms in your web application. One of them is the template-driven approach which allows us to build forms with normal HTML code and a very little angular typescrpt code.

The second approach is the the model-driven also know as reactive approach using low level APIs. Reactive forms provide a model-driven approach to handling form inputs whose values change over time.

Angular Template Driven Forms

In this article we are going to talk about Template Driven Approach and learn how to create a Angular Template Driven Form with example.

Read More: Best Angular Interview Questions

What is Angular Template Driven Forms ?

Angular template driven forms are the forms which we can make by using the normal HTML code. All the form validation, logics, controls etc are the part of the code (html code).

The template i.e the HTML Code is responsible for setting up the form, the validation, control, group etc. Template driven forms are best suited for the scenario where you want to use two way data binding using the [(NgModel)] syntax and in the case where you want to keep the form building method simple yet reliable.

How to make Angular Template Driven Forms ?

In this section, we are going to show you that how you can make form using the angular templte driven form approach. so without wasting much time let’s dive in.

Step 1: For making the angular template driven form, the very first thing we need to do is to explicitly import {FormsModule} in our application module from @angular/forms in our main module file.

import { FormsModule } from '@angular/forms'; //note this
@Component({...})
export class App { }
@NgModule({
  declarations: [App],
  imports: [BrowserModule, FormsModule],      //note this too
  bootstrap: [App]
})
export class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);

Step 2: After we have imported formsModule in our module file, we can now use it to make template driven form. Now we need to mention ngModel in the form input with name property.

<input type="text" ngModel name="firstName">

Step 3: Embrace this input html code into the form tag with the id of ngform. The ngForm is an instance of the FormGroup.

The FormGroup represents the group of FormControl, each form is a FormGroup because it will have at least one FormControl that gives us access to the values of the form.

<form #f="ngForm" (ngSubmit)="submit(f)">
  <input type="text" ngModel 
         name="firstName" 
         #firstName="ngModel">
</form>

Validations on Angular Template Driven forms

Step 4: Adding Validation to the Template driven Angular Form

We are almost done with our form which has a single input field. Now we need to add validation to our form. We are going to add the html validation and properly displaying appropriate errors when the validation fails.

The key things we are going to hook unto are touch and valid status of our form control or form group.

Required: is use to enforce the user that the input must be filled.

<input type="text" ngModel name="firstName" #firstName="ngModel" required><div *ngIf="firstName.touch && ! firstName.valid">
Firstname is required
</div>

Now there will be an error message Firstname is required, if the input was touched and was not filled.

That’s it. The simple validation are done and we just got our very first angular template driven forms. Although, It is a very simple demonstration of angular template driven forms, there is very much more to explore.

Leave a Comment