Angular - Template Driven Forms

---

---

Template-Driven Forms in Angular

The template-driven form is a type of Angular form that relies on the template for managing form state and validation. It is created directly in the HTML template using Angular directives.

These forms are simpler to set up and hence, mainly used for creating a simple and less complex form application. Let's understand how to create and use template driven forms in an Angular application.

Directives used in Template-Driven Form

The following directives of the FormsModule class are used in Template-Driven Form −

• NgModel: This directive is used to create two-way data binding between the form control in the template and the corresponding property in the component class. It binds the input field to a model in the component, and the model is updated whenever the input field value changes.

• NgForm: It is used to track the form state. It automatically creates a FormGroup for the entire form when applied to the form tag.

• NgModelGroup: The ngModelGroup directive is used to group related form controls into a nested form group.

Creating Angular Template-Driven Form

To create an Angular template-driven form, follow the steps given below −

• Step 1: First, import FormsModule class of the @angular/forms package.

• Step 2: Next, define the properties that will be bound to form controls in the template. These properties will hold the data entered by the user.

• Step 3: Now, open the component's HTML template (e.g., app.component.html) and create the form. Inside the newly created form, use the ngForm directive to bind the entire form and track its state.

• Step 4: Finally, use the ngModel directive on each form control to bind it to the corresponding property in the component class. The name attribute is used to identify the control within the form, and the ngModel for two-way data binding.

Example

Let us create a sample application (template-form-app) in Angular to learn the template-driven form. Here, we create a simple template-driven form to display user-entered text.

Step 1: Open the Angular CLI and create a new Angular application using the below command −

ng new template-form-app 

Step 2: Add the below code in app.component.html file −

<div>
  <form #userForm="ngForm" (ngSubmit)="onClickSubmit(userForm.value)">
    <input class="input-box" type="text" name="username" placeholder="Username" ngModel required>
    <input class="btn" type="submit" value="Submit" [disabled]="!userForm.valid">
  </form>
</div>
<p *ngIf="submitted">You have entered: {{ username }}</p>
<router-outlet />

Here,

• Created a template reference variable named userForm using the ngForm directive.

• The ngSubmit event is bound to the onClickSubmit() function, which will be called when the form is submitted.

• The ngModel directive binds the input field to the form model to enable two-way data binding.

• The ngIf directive will display the paragraph conditionally i.e. when submitted becomes true.

Step 3: Now import the FormsModule inside app.component.ts file as shown below −

import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RouterOutlet } from '@angular/router';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, FormsModule, CommonModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent implements OnInit {
  title = 'template-form-app';
  username: string = ""; 
  submitted: boolean = false; 
  ngOnInit() { } 
  onClickSubmit(result: { username: string; }) { 
    this.username = result.username; 
    this.submitted = true; 
  }
}

Step 4: Open app.component.css and add the code shown below −

div {
    height: 100px;
    margin-top: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(165, 223, 204);
}
.input-box {
    margin: 10px;
    padding: 5px 15px;
    border-color: rgb(103, 220, 181);
}
.btn {
    padding: 5px 15px;
    color: white;
    font-weight: bold;
    background-color: rgb(103, 220, 181);
}
p { 
    font-weight: bold;
    margin-top: 10px;
}

Step 5: Now, start your application using the below command −

ng serve

When the application will start, you will see the below response −

Flow of Data in Template-Driven Forms

In template-driven forms, the data flows in two ways as shown below −

• View to Model
• Model to View

View-to-Model Flow Diagram

The diagram given below illustrates how data flows when an input field's value is changed from the view in template-driven forms −

Model-to-View Flow Diagram

The diagram given below shows the model-to-view data flow in template-driven forms. This means how data flows from model to view when logic is changed.