reveal.js

# Template-driven Forms vs Reactive Forms

Lesson 3 - Angular Routing, Forms และ State

**Template-driven Forms** คือฟอร์มที่กำหนด logic หลักใน Template ด้วย `ngModel` ส่วน **Reactive Forms** คือฟอร์มที่สร้างและควบคุมจาก Component Class เหมาะกับงานซับซ้อนและทดสอบง่ายกว่า

---

## Timeline/ประวัติศาสตร์

<pre class="mermaid">
%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart LR
  subgraph Era1["ยุค HTML Form / Native Form"]
    A["input + submit<br/>ตรวจพื้นฐานใน Browser"]
  end
  subgraph Era2["ยุค Template Form / Simple Angular Form"]
    B["ngModel<br/>เขียนง่ายใน Template"]
  end
  subgraph Era3["ยุค Reactive Form / Complex Form"]
    C["FormGroup/FormControl<br/>ควบคุมใน Class"]
    D["Dynamic Form<br/>สร้างฟอร์มตามข้อมูล"]
  end
  A --> B --> C --> D
</pre>

---

## แนวคิดสำคัญ

- **Template-driven** ง่าย เหมาะกับฟอร์มเล็ก ใช้ `ngModel` ใน Template
- **Reactive Forms** ยืดหยุ่น เหมาะกับฟอร์มซับซ้อน สร้างใน Component Class
- **ข้อดี Reactive** คือ Unit Test ง่ายกว่า รองรับ Dynamic Form และควบคุมละเอียด
- **FormsModule** ใช้กับ Template-driven Forms
- **ReactiveFormsModule** ใช้กับ Reactive Forms
- **สถานะฟอร์ม** ได้แก่ `valid`, `invalid`, `dirty`, `pristine`, `touched`, `untouched`
- **Error Message** ควรแสดงเมื่อ field ถูกแตะหรือมีการแก้ไขแล้ว

---

## ตารางเปรียบเทียบฟอร์ม

| หัวข้อ | Template-driven Forms | Reactive Forms |
|---|---|---|
| จุดควบคุมหลัก | Template | Component Class |
| ความง่าย | ง่ายกว่า | ต้องเขียนโค้ดมากกว่า |
| ฟอร์มซับซ้อน | ไม่เหมาะมาก | เหมาะมาก |
| Unit Test | ยากกว่า | ง่ายกว่า |
| Dynamic Form | จำกัด | ยืดหยุ่น |
| Module | `FormsModule` | `ReactiveFormsModule` |

---

## Mermaid Diagram: Forms Decision

<pre class="mermaid">
%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart TD
  A["ต้องสร้างฟอร์ม?<br/>Need form?"] --> B{"ซับซ้อนหรือ Dynamic?<br/>Complex or dynamic?"}
  B -->|ไม่ / No| C["Template-driven<br/>ngModel"]
  B -->|ใช่ / Yes| D["Reactive Forms<br/>FormGroup"]
  D --> E["Validators + Unit Test<br/>ตรวจง่าย"]
  C --> F["FormsModule<br/>ตั้งค่าง่าย"]
</pre>

---

## Code Example

```typescript
// app.module.ts
// import module ให้ตรงกับชนิดฟอร์มที่ใช้
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

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

```html


<form #loginForm="ngForm" (ngSubmit)="submitTemplate(loginForm.value)">
  <input name="email" ngModel required email>
  <button type="submit" [disabled]="loginForm.invalid">Login</button>
</form>
```

```typescript
// reactive-form example
// สร้าง FormGroup ใน Component Class
import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-login-reactive',
  template: `
    <form [formGroup]="loginForm" (ngSubmit)="submitReactive()">
      <input formControlName="email">
      <p *ngIf="loginForm.controls.email.touched && loginForm.controls.email.invalid">
        กรุณากรอกอีเมลให้ถูกต้อง
      </p>
      <button type="submit" [disabled]="loginForm.invalid">Login</button>
    </form>
  `
})
export class LoginReactiveComponent {
  loginForm = new FormGroup({
    email: new FormControl('', [Validators.required, Validators.email])
  });

submitReactive(): void {
    console.log(this.loginForm.value);
  }
}

// ตัวอย่างการใช้งาน:
// Reactive form เหมาะเมื่ออยากตรวจค่าหรือทดสอบ logic ใน TypeScript
```

---

## กิจกรรมท้ายบท

1. สร้างฟอร์ม login ด้วย Template-driven Forms
2. สร้างฟอร์ม login แบบเดียวกันด้วย Reactive Forms
3. เปรียบเทียบจำนวน logic ที่อยู่ใน Template กับ Component

---

## End

<a href="/web-programming/09-angular-routing-forms/index.md" style="display:inline-block;padding:0.6em 1em;border-radius:8px;background:#fabd2f;color:#282828;text-decoration:none;font-weight:700;">กลับหน้าบทเรียน</a>