Angular Forms (Template-Driven & Reactive)

1. Setting Up Forms in Angular

Before using forms, import FormsModule and ReactiveFormsModule in app.module.ts:

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

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

2. Template-Driven Forms

Template-driven forms rely on directives such as ngModel to bind data to a component.

Creating a Simple Form

Modify app.component.html:

<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" [(ngModel)]="user.name" required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" [(ngModel)]="user.email" required>

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

Handling Form Submission

Modify 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(form: any) {
    console.log('Form Submitted:', form.value);
  }
}

✅ Advantages of Template-Driven Forms:

Simple and easy to use
Good for small forms

❌ Limitations:

Less flexible for complex forms
Harder to manage dynamically

3. Reactive Forms

Reactive forms use FormGroup and FormControl for more control over form validation and handling.

Creating a Reactive Form

Modify app.component.ts:

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

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

  onSubmit() {
    console.log('Reactive Form Submitted:', this.userForm.value);
  }
}

Creating the Form in HTML

Modify app.component.html:

<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
  <label for="name">Name:</label>
  <input type="text" id="name" formControlName="name">
  <div *ngIf="userForm.controls.name.invalid && userForm.controls.name.touched">
    Name is required
  </div>

  <label for="email">Email:</label>
  <input type="email" id="email" formControlName="email">
  <div *ngIf="userForm.controls.email.invalid && userForm.controls.email.touched">
    Enter a valid email
  </div>

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

✅ Advantages of Reactive Forms:

More control over form state and validation
Easier to test and debug
Works well with dynamic form elements

❌ Limitations:

More complex setup compared to template-driven forms

4. Form Validation

Both template-driven and reactive forms support validation.

Built-in Validators (Reactive Forms Example)

email: new FormControl('', [Validators.required, Validators.email])

Custom Validators Example

customValidator(control: FormControl) {
  return control.value.length < 5 ? { shortValue: true } : null;
}

Conclusion

✔ Template-Driven Forms are simple and suitable for small applications.
✔ Reactive Forms offer better structure, control, and are ideal for large applications.
✔ Both methods provide validation options to ensure correct data submission.
✔ Understanding both approaches will help in choosing the right method for your project. 🚀

ANGULAR