大神來六角2021的投影片

1. Angular 深入淺出表單篇：新⼿入⾨（⼆）

2. • 「Angular 深入淺出三⼗天」
• 「Angular Schematics 實戰三⼗天」
• ⽬前任職於 Lilee Systems
陳志龍（Leo 李歐）

3. • Reactive Forms 簡介
• Reactive Forms 簡易表單實作－登入
• Template Driven Forms vs Reactive Forms
⼤綱

4. Reactive Forms 簡介

5. • Data Binding -> ngMode
l
• Validators -> HTML Attribut
e
• Angular template syntax
如何使⽤ Template Driven Forms 來製作表單？

6. • FormBuilde
r
• FormGrou
p
• FormContro
l
• Validator
s
• RxJS
如何使⽤ Reactive Forms 來製作表單？

7. Reactive Forms 簡易表單實作－登入

8. • 帳號
• 格式為 Email Address，此處則直接使⽤正規表⽰法
/^b[w.-]+@[w.-]+.w{2,4}b$/gi 來檢驗，驗證
有誤時需在欄位後⽅顯⽰錯誤訊息：格式有誤，請重新輸入
• 此欄位必填，驗證有誤時需需在欄位後⽅顯⽰錯誤訊息：此欄位
必填
規格需求

9. • 密碼
• 長度最短不得低於 8 碼，驗證有誤時需需在欄位後⽅顯⽰錯誤訊息：
密碼長度最短不得低於8碼
• 長度最長不得超過 16碼，驗證有誤時需需在欄位後⽅顯⽰錯誤訊
息：密碼長度最長不得超過16碼
• 此欄位必填，驗證有誤時需需在欄位後⽅顯⽰錯誤訊息：此欄位必填
規格需求

10. • 以上驗證皆需在使⽤者輸入時動態檢查
• 任⼀驗證有誤時，登入按鈕皆呈現不可被點選之狀態。
規格需求

11. Template Driven Forms vs Reactive Forms

12. • Data Binding -> ngMode
l
• Validators -> HTML Attribut
e
• Angular template syntax
如何使⽤ Template Driven Forms 來製作表單？

13. • FormBuilde
r
• FormGrou
p
• FormContro
l
• Validator
s
• RxJS
如何使⽤ Reactive Forms 來製作表單？

14. Template Driven Forms Reactive Forms
學習難易度 簡單 困難
重⽤難易度 困難 簡單
擴充難易度 困難 簡單
測試難易度 困難 簡單

15. • 資料即表單
• import FormsModule & ReactiveFormsModule
重點

16. 相關連結
Angular Taiwan 臉書社團 Angular Taiwan 論壇
Angular Taiwan 線上讀書會社團 Angular Taiwan Youtube 頻道

17. Thank you