Template-Driven Forms in Angular

Template-driven forms in Angular are a simple and easy way to build forms using Angular directives in the template. This tutorial covers the basics of template-driven forms and how to use them effectively in your Angular applications.

What are Template-Driven Forms?

Template-driven forms rely on Angular directives in the template to create and manage the form. This approach is suitable for simpler forms where the form logic is primarily handled in the template.

Setting Up Template-Driven Forms

To set up template-driven forms, you need to import the FormsModule in your application module:

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Creating a Template-Driven Form

Here is an example of a simple template-driven form:

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  user = {
    name: '',
    email: ''
  };

  onSubmit() {
    console.log('Form submitted!', this.user);
  }
}

// app.component.html
<form (ngSubmit)="onSubmit()" #userForm="ngForm">
  <div>
    <label for="name">Name</label>
    <input type="text" id="name" [(ngModel)]="user.name" name="name" required>
  </div>
  <div>
    <label for="email">Email</label>
    <input type="email" id="email" [(ngModel)]="user.email" name="email" required>
  </div>
  <button type="submit" [disabled]="!userForm.form.valid">Submit</button>
</form>

Form Validation

Template-driven forms support built-in validators such as required, minlength, maxlength, pattern, etc. Custom validators can also be created if needed:

<form (ngSubmit)="onSubmit()" #userForm="ngForm">
  <div>
    <label for="name">Name</label>
    <input type="text" id="name" [(ngModel)]="user.name" name="name" required minlength="3">
    <div *ngIf="userForm.submitted && userForm.controls.name.errors">
      <div *ngIf="userForm.controls.name.errors.required">Name is required</div>
      <div *ngIf="userForm.controls.name.errors.minlength">Name must be at least 3 characters long</div>
    </div>
  </div>
  <div>
    <label for="email">Email</label>
    <input type="email" id="email" [(ngModel)]="user.email" name="email" required>
    <div *ngIf="userForm.submitted && userForm.controls.email.errors">
      <div *ngIf="userForm.controls.email.errors.required">Email is required</div>
      <div *ngIf="userForm.controls.email.errors.email">Invalid email format</div>
    </div>
  </div>
  <button type="submit" [disabled]="!userForm.form.valid">Submit</button>
</form>

Form State and Control

Template-driven forms provide various properties to check the state of the form and its controls, such as valid, invalid, pristine, dirty, touched, and untouched:

<form (ngSubmit)="onSubmit()" #userForm="ngForm">
  <div>
    <label for="name">Name</label>
    <input type="text" id="name" [(ngModel)]="user.name" name="name" required>
    <div *ngIf="userForm.controls.name.invalid && userForm.controls.name.touched">Name is required</div>
  </div>
  <div>
    <label for="email">Email</label>
    <input type="email" id="email" [(ngModel)]="user.email" name="email" required>
    <div *ngIf="userForm.controls.email.invalid && userForm.controls.email.touched">Email is required</div>
  </div>
  <button type="submit" [disabled]="userForm.invalid">Submit</button>
</form>

Key Points

Conclusion

Template-driven forms in Angular provide a straightforward way to handle user inputs and form validation. By understanding and using template-driven forms effectively, you can create robust and user-friendly forms in your Angular applications. Happy coding!