Introduction to Template-Driven Forms in Angular

Template-driven forms are a core feature of Angular, providing an intuitive and declarative way to manage user inputs. This approach is particularly useful for small to medium-sized forms or when you prefer working directly in the HTML template. In this blog, we will explore the basics of template-driven forms, from setting them up to implementing validations.

Why Choose Template-Driven Forms?

• Declarative: form logic written in HTML templates, making it easier to visualize the form's structure.
• Easy to Use: Easy to use forms with minimal validation requirements. 
• Two-way data binding: automatically bind form fields to the model.

Settings Up Template-Driven Forms in Angular

Import the FormsModule

Before you can use template-driven forms, make sure that the FormsModule  is imported into your Angular Module.

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

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

Create a Basic Form in the Template

Here's a simple example of a form for user registration

<!-- app.component.html -->
<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">
  <div>
    <label for="username">Username:</label>
    <input
      type="text"
      id="username"
      name="username"
      [(ngModel)]="user.username"
      #username="ngModel"
      required
    />
    <div *ngIf="username.invalid && username.touched">
      <small *ngIf="username.errors?.required">Username is required.</small>
    </div>
  </div>

  <div>
    <label for="email">Email:</label>
    <input
      type="email"
      id="email"
      name="email"
      [(ngModel)]="user.email"
      #email="ngModel"
      required
      email
    />
    <div *ngIf="email.invalid && email.touched">
      <small *ngIf="email.errors?.required">Email is required.</small>
      <small *ngIf="email.errors?.email">Invalid email address.</small>
    </div>
  </div>

  <div>
    <label for="password">Password:</label>
    <input
      type="password"
      id="password"
      name="password"
      [(ngModel)]="user.password"
      #password="ngModel"
      required
      minlength="6"
    />
    <div *ngIf="password.invalid && password.touched">
      <small *ngIf="password.errors?.required">Password is required.</small>
      <small *ngIf="password.errors?.minlength">
        Password must be at least 6 characters long.
      </small>
    </div>
  </div>

  <button type="submit" [disabled]="userForm.invalid">Submit</button>
</form>

Define the Component Logic

In the component, declare the model and the onSubmit method to handle form submissions.

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

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

  onSubmit(form: any) {
    if (form.valid) {
      console.log('Form Submitted', this.user);
    } else {
      console.log('Form is invalid');
    }
  }
}

Key Features of Tempalte-Driven Forms

Form Validation

Angular offers built-in validators like required, email, and minlength that can be directly added as attributes. You can also define custom validators if needed.

Two-Way Data Binding

The [(ngModel)] directive binds form fields to the component's model, ensuring that any changes to the forms are automatically reflected in the model.

Accessing Form State

Using template references, #username = "ngModel" you can access the control's state, such as valid, invalid, touched, or untouched.

Advantages of Template-Driven Forms

• Simplicity: minimal boilerplate compared to reactive forms.
• Readability: Keeps form-related code in the template.
• Quick Setup: Great for small projects or quick prototypes.

Limitations

• Less control over the form compared to reactive forms.
• Not ideal for forms with dynamic fields or complex validation logic.
• Can become unwieldy for larger forms with multiple validations.

Conclusion

Template-driven forms are an excellent choice for small to medium-sized applications or when you need a quick and straightforward form solution. With features like two-way data binding and built-in validators, you can build robust forms without diving into too much cmplexity.