Template-driven Forms

This lesson introduces you to template-driven forms in Angular, allowing you to quickly build simple forms.

What are Template-driven Forms?

Template-driven forms use HTML templates and Angular directives to handle form creation, validation, and submission easily.

Importing FormsModule

To use template-driven forms, import FormsModule into your Angular module:

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

Creating a Simple Form

Define a simple form in your template using the ngForm directive:

<form #form="ngForm">
  <input name="username" ngModel>
</form>

Two-way Binding with ngModel

ngModel binds form controls to component properties using two-way data binding:

<input [(ngModel)]="user.name" name="username">

Form Submission

Handle form submission easily using Angular's event binding:

<form (ngSubmit)="onSubmit(form)" #form="ngForm">

Form Validation

Angular provides easy validation directives like required and minlength:

<input name="username" ngModel required minlength="4">

Accessing Form State

Access form state, like validity or touched status, through template variables:

<div *ngIf="form.invalid && form.touched">Form is invalid!</div>

Summary

You've learned how to create, bind, validate, and submit forms easily with template-driven forms. Keep practicing!