隨記

Week 05 · Day 07 — 第五週總複習：表單

學習目標

  • 回顧兩種表單方式與驗證
  • 能選擇合適的表單方式
  • 完成並通過本週作業

重點速覽

  • Template-driven：主要在 HTML，用 ngModel + #form="ngForm"，適合簡單表單
  • Reactive：主要在 TS，用 FormBuilder + [formGroup] + formControlName，適合複雜表單
  • 內建驗證：required / minLength / email / pattern …
  • 錯誤結構：control.errors = { 名稱: 資訊 }
  • 群組驗證：如表單第二參數放 validator
  • 自訂驗證器：回傳 ValidatorFn，通過 null、失敗回錯誤物件

自我測驗

  1. 兩種表單方式分別？適合什麼？
  2. form.get('name')?.invalid 與 .touched 的組合意義？
  3. 自訂驗證器通過/失敗各回傳什麼？
  4. registerForm.value 回傳什麼？
答案 1. Template-driven（簡單）、Reactive（複雜） 2. 欄位有錯「且」使用者已碰過才顯示 3. 通過回 `null`、失敗回錯誤物件 4. 表單所有欄位值的物件

作業

第五週作業（README） - [ ] 建立登入表單（Template-driven）✅ - [ ] 建立註冊表單（Reactive）✅ - [ ] 實作自訂驗證器 ✅

實作檢核 - [ ] 登入表單 email+password 可用 disabled 攔下不合法送出 - [ ] 註冊表單含群組驗證（密碼相符） - [ ] 至少 1 個自訂驗證器並顯示錯誤訊息

總結

你已能打造結合驗證的表單。下一週把前端接上後端——HTTP 與服務。