Reactive Forms & Form Validation

Reactive Forms in Angular

Reactive Forms in Angular are model-driven, giving you programmatic control over form logic, structure, and validation entirely from the component class. They're great for complex, dynamic forms and large applications.

---

🔧 Setup

Import ReactiveFormsModule in AppModule:

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

@NgModule({
  imports: [ReactiveFormsModule]
})
export class AppModule { }

---

🧠 Example: Reactive Form with Validation

📄 Component Class (app.component.ts)

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  userForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.userForm = this.fb.group({
      name: ['', [Validators.required]],
      email: ['', [Validators.required, Validators.email]],
      age: ['', [Validators.min(18)]]
    });
  }

  onSubmit() {
    if (this.userForm.valid) {
      console.log('Form Data:', this.userForm.value);
    } else {
      console.log('Form Invalid');
    }
  }
}

---

📄 Template (app.component.html)

<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
  <label>Name:
    <input formControlName="name" />
    <span *ngIf="userForm.get('name')?.invalid && userForm.get('name')?.touched">
      Name is required
    </span>
  </label>

  <label>Email:
    <input formControlName="email" />
    <span *ngIf="userForm.get('email')?.invalid && userForm.get('email')?.touched">
      Enter a valid email
    </span>
  </label>

  <label>Age:
    <input formControlName="age" type="number" />
    <span *ngIf="userForm.get('age')?.invalid && userForm.get('age')?.touched">
      Age must be 18 or above
    </span>
  </label>

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

---

🛠 Built-in Validators

• Validators.required
• Validators.email
• Validators.minLength(n)
• Validators.maxLength(n)
• Validators.pattern('regex')
• Validators.min(n)
• Validators.max(n)

---

🧪 Custom Validators (Optional)

function customValidator(control: AbstractControl): ValidationErrors | null {
  return control.value === 'admin' ? { forbiddenName: true } : null;
}

Use it like:

username: ['', [customValidator]]

---