reveal.js

# FormGroup, FormControl, FormBuilder, Validators

Lesson 4 - Angular Routing, Forms และ State

**Reactive Forms** ใช้ **FormControl** เพื่อควบคุม input เดี่ยว ใช้ **FormGroup** เพื่อรวมหลาย control ใช้ **FormArray** เพื่อรองรับรายการแบบ dynamic และใช้ **Validators** เพื่อตรวจสอบความถูกต้องของข้อมูล

---

## 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["ยุค Manual Validation / Manual Checks"]
    A["if input === ''<br/>ตรวจเองทีละ field"]
  end
  subgraph Era2["ยุค Form Model / Reactive Forms"]
    B["FormControl<br/>ควบคุม input"]
    C["FormGroup<br/>รวมหลาย field"]
  end
  subgraph Era3["ยุค Dynamic Validation / Advanced Forms"]
    D["FormArray<br/>รายการ dynamic"]
    E["Custom/Async Validator<br/>กติกาเฉพาะระบบ"]
  end
  A --> B --> C --> D --> E
</pre>

---

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

- **FormControl** ควบคุม Input เดี่ยว เช่น `new FormControl('', Validators.required)`
- **FormGroup** รวม FormControl หลายตัว เช่น `{ name, email }`
- **FormArray** ใช้กับรายการ FormControl แบบ Dynamic
- **FormBuilder** ช่วยสร้างฟอร์มให้กระชับขึ้น
- **Built-in Validators** ได้แก่ `required`, `minLength`, `maxLength`, `email`, `pattern`, `min`, `max`
- **Custom Validator** คือ Function ที่คืน `null` เมื่อ valid หรือคืน Object เมื่อ error
- **Async Validator** ใช้ตรวจสอบกับ Server เช่น ชื่อผู้ใช้ซ้ำ

---

## ตารางเปรียบเทียบส่วนประกอบ Reactive Forms

| ส่วนประกอบ | หน้าที่ | ตัวอย่าง |
|---|---|---|
| `FormControl` | ควบคุม field เดี่ยว | `name` |
| `FormGroup` | รวมหลาย field | profile form |
| `FormArray` | รายการ dynamic | เบอร์โทรหลายเบอร์ |
| `FormBuilder` | สร้างฟอร์มแบบสั้น | `fb.group()` |
| `Validators` | ตรวจความถูกต้อง | `required`, `email` |

---

## Mermaid Diagram: Reactive Form Model

<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["FormGroup<br/>ฟอร์มหลัก"] --> B["FormControl: name<br/>ชื่อ"]
  A --> C["FormControl: email<br/>อีเมล"]
  A --> D["FormArray: skills<br/>ทักษะหลายรายการ"]
  B --> E["Validators.required<br/>ต้องกรอก"]
  C --> F["Validators.email<br/>รูปแบบอีเมล"]
</pre>

---

## Code Example

```typescript
// profile-form.component.ts
// Reactive Form พร้อม built-in validator และ custom validator
import { Component } from '@angular/core';
import { AbstractControl, FormArray, FormBuilder, ValidationErrors, Validators } from '@angular/forms';

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

@Component({
  selector: 'app-profile-form',
  templateUrl: './profile-form.component.html'
})
export class ProfileFormComponent {
  constructor(private fb: FormBuilder) {}

profileForm = this.fb.group({
    name: ['', [Validators.required, Validators.minLength(3), noAdminName]],
    email: ['', [Validators.required, Validators.email]],
    skills: this.fb.array([
      this.fb.control('HTML')
    ])
  });

get skills(): FormArray {
    return this.profileForm.get('skills') as FormArray;
  }

addSkill(): void {
    this.skills.push(this.fb.control('', Validators.required));
  }

save(): void {
    if (this.profileForm.valid) {
      console.log(this.profileForm.value);
    }
  }
}

// ตัวอย่างการใช้งาน:
// กด Add Skill เพื่อเพิ่ม FormControl ใหม่ใน FormArray
```

```html

<form [formGroup]="profileForm" (ngSubmit)="save()">
  <input formControlName="name" placeholder="ชื่อ">
  <p *ngIf="profileForm.controls.name.hasError('reservedName')">
    ห้ามใช้ชื่อ admin
  </p>

<button type="button" (click)="addSkill()">Add Skill</button>
  <button type="submit" [disabled]="profileForm.invalid">Save</button>
</form>
```

---

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

- สร้างฟอร์มเพิ่มบทเรียน
- ตรวจชื่อบทเรียนด้วย `required` และ `minLength`
- เพิ่ม `FormArray` สำหรับรายการ keyword
- สร้าง Custom Validator ห้ามใช้คำว่า `test`

---

## 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>