Template Driven Forms Explained - HTML Controlled Forms

What are Template Driven Forms

Template Driven Forms are forms where all control is handled in the HTML file.

Unlike Reactive Forms, there is very little logic in the TypeScript file.


When to Use Template Driven Forms

They are used when:

  1. Form is very simple
  2. Only few input fields are needed
  3. Very little or no validation is required

For complex forms, Reactive Forms are better.


Creating a Simple Form (HTML)

<form #userForm="ngForm" (ngSubmit)="addUser(userForm.value)">

<input
type="text"
placeholder="Enter Username"
name="username"
ngModel
/>
<br><br>

<input
type="password"
placeholder="Enter Password"
name="password"
ngModel
/>
<br><br>

<select name="gender" ngModel>
<option value="">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<br><br>

<input
type="range"
name="range"
ngModel
/>
<br><br>

<textarea
name="bio"
ngModel
placeholder="User Bio">
</textarea>
<br><br>

<button type="submit">Add User</button>

</form>

Important points:

  1. ngForm is used on form
  2. ngModel is required on every input
  3. name attribute is mandatory
  4. (ngSubmit) is used to submit the form


Importing FormsModule (TypeScript)

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

FormsModule must be imported for Template Driven Forms to work.


TypeScript File Code

userDetails: any = undefined;

addUser(data: any) {
console.log(data);
this.userDetails = data;
}
  1. Form values come inside data
  2. Data is stored to display on UI


Display Form Data on UI

<ul *ngIf="userDetails">
<li>Username: {{ userDetails?.username }}</li>
<li>Gender: {{ userDetails?.gender }}</li>
<li>Range: {{ userDetails?.range }}</li>
<li>Bio: {{ userDetails?.bio }}</li>
</ul>
  1. ? is used because values are undefined initially
  2. Data appears after form submission


Common Mistakes Explained

  1. If ngModel is missing → value will not come
  2. If name attribute is missing → value will not come
  3. All fields must have both name and ngModel