Angular Forms: Template-driven vs Reactive Forms เลือกใช้แบบไหนดี

Angular Forms มี 2 แบบ

Angular มีวิธีจัดการ Form 2 แบบหลัก คือ Template-driven Forms และ Reactive Forms แต่ละแบบมีจุดเด่นต่างกัน

Template-driven Forms

เหมาะกับ form ง่ายๆ ที่ไม่ซับซ้อน

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

@Component({
  standalone: true,
  imports: [FormsModule],
  template: `
    <form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
      <input name="email" ngModel required email />
      <input name="password" ngModel required minlength="6" />
      <button type="submit" [disabled]="myForm.invalid">Login</button>
    </form>
  `
})
export class LoginComponent {
  onSubmit(form: NgForm) {
    console.log(form.value);
  }
}

Reactive Forms

เหมาะกับ form ซับซ้อน ต้องการ validation แบบ dynamic

import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';

@Component({
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <input formControlName="email" />
      <span *ngIf="form.get('email')?.invalid">Email ไม่ถูกต้อง</span>
      <input formControlName="password" type="password" />
      <button type="submit" [disabled]="form.invalid">Login</button>
    </form>
  `
})
export class LoginComponent {
  form = this.fb.group({
    email: ['', [Validators.required, Validators.email]],
    password: ['', [Validators.required, Validators.minLength(6)]]
  });

  constructor(private fb: FormBuilder) {}

  onSubmit() {
    console.log(this.form.value);
  }
}

Custom Validator

import { AbstractControl, ValidationErrors } from '@angular/forms';

export function thaiPhoneValidator(control: AbstractControl): ValidationErrors | null {
  const value = control.value;
  if (!value) return null;
  const valid = /^0[6-9]\d{8}$/.test(value);
  return valid ? null : { thaiPhone: true };
}

เปรียบเทียบ

หัวข้อ	Template-driven	Reactive
ความซับซ้อน	ต่ำ	สูง
Unit test	ยาก	ง่าย
Dynamic form	ยาก	ง่าย
เหมาะกับ	Form เล็ก	Form ใหญ่

สรุป

ถ้า form ง่ายใช้ Template-driven ถ้า form ซับซ้อนหรือต้องการ test ใช้ Reactive Forms ครับ