Downloaded 20 times
![AngularJS
User Group Taiwan
[(ngModel)]
"Box of Bananas"
"[ ]" 代表一個從 model 到 view 的單向資料綁定
"( )" 代表一個從 view 到 model 的單向資料綁定
[ngModel] (ngModelChange)](https://image.slidesharecdn.com/angular2form-161208144242/85/Angular-2-15-320.jpg)
Uploaded byJeff Wu
Angular 2 表單的處理與驗證
本文件介绍了 Angular 2 表单的处理与验证，重点阐述了模板驱动和模型驱动两种表单处理方式。文件还详细描述了如何快速创建 Angular 项目、表单功能与使用的指令，以及两种方式的比较与应用场景。最后，倡导加入社团以便交流和学习。
Angular 2 表單的處理與驗證
- 1. AngularJS User Group Taiwan Angular2 Forms 表單的處理與驗證 多奇數位創意有限公司 前端工程師 吳承翰 ( Jeff Ｗu) 部落格：http://jeffwu85182.github.io
- 2. AngularJS User Group Taiwan •什麼是 Angular Forms • Template-driven 介紹 • Model-driven 介紹 • Demo • Template-driven • Model-driven • Reference Agenda
- 3. AngularJS User Group Taiwan •需要先安裝 node.js & npm • npm install -g angular-cli typescript • ng new porjectName • cd projectName • ng serve 快速建立 Project 三步驟
- 4. AngularJS User Group Taiwan AngularForms 它，能為我們做些什麼？
- 5. AngularJS User Group Taiwan AngularForms 的用途? • 基本用途 • 將表單資料進行序列化 • 提供初始預設資料 • 驗證表單資料 • 顯示有幫助的錯誤提示訊息 • 進階用途 • 自訂表單控制項（Form Controls） • 自訂驗證器（Validators） • 動態建立控制項
- 6. AngularJS User Group Taiwan AngularForms 提供了兩種方式來處理表單 Template-driven 和 Model-driven
- 7. AngularJS User Group Taiwan TemplateDriven Forms 就像 Angular 1 一樣的，易懂實用。
- 8. AngularJS User Group Taiwan •和 Angular 1 一樣有 ng-model directive. • 只能進行 End to End 測試 • 需要有 DOM 的存在 • Import Module：FormsModule • 可使用以下 directives 建立： • ngForm • ngModel • ngModelGroup Template Driven
- 9. AngularJS User Group Taiwan View •<input name="firstName" type="text" ngModel> • 注意 • 一定要加 name ，很重要 • 依需求用 ngModel 指定 component 的 model Model • value • valid/invalid • pristine/dirty • touched/untouched • errors 來源： Kara Erickson
- 10. AngularJS User Group Taiwan View( ControlValueAccessor ) • <input type="text" name="first-name" ngModel> • <input type="radio" name="radio-name" ngModel> • <select name="select-name" ngModel></select> Model ( FormControl ) • value • valid/invalid • pristine/dirty • touched/untouched • errors 來源： Kara Erickson
- 11. AngularJS User Group Taiwan FormControl name:street FormControl name: city FormControl name: state FormControl name: zip 來源： Kara Erickson
- 12. AngularJS User Group Taiwan FormControl name:street FormControl name: city FormControl name: state FormControl name: zip Form Group • value • valid / invalid • pristine / dirty • touched / untouched • errors • get('street') • hasError () • ... 來源： Kara Erickson
- 13. AngularJS User Group Taiwan •提供追蹤表單及欄位狀態 • 依照狀態提供的 CSS classes 可快速套用樣式 NgModel 驗證功能 State Class if true Class if false Control 被點擊接觸過 ng-touched ng-untouched Control 的值被改變 ng-dirty ng-pristine Control 的值不符合驗證 ng-valid ng-invalid
- 14. Demo Show you somethingcool ;)
- 15. AngularJS User Group Taiwan [(ngModel)] "Boxof Bananas" "[ ]" 代表一個從 model 到 view 的單向資料綁定 "( )" 代表一個從 view 到 model 的單向資料綁定 [ngModel] (ngModelChange)
- 16.
- 17. AngularJS User Group Taiwan ModelDriven Forms 面對各種奇葩需求，更能禁得起考驗。
- 18. AngularJS User Group Taiwan •Import Module：ReactiveFormsModule • 由 Directives 綁定存在的控制項 • 適合處理複雜的邏輯、動態的表單內容 • 表單驗證邏輯可進行單元測試（Unit Test） Model Driven Forms
- 19. AngularJS User Group Taiwan •FormControlName • FormGroupName • FormArrayName Model Driven 常用的 Directives
- 20. Demo Show you somethingcool ;)
- 21. AngularJS User Group Taiwan 常用的Directives Template-Driven • ngModel • ngModelGroup • ngForm • FormControlName • FormGroupName • FormArrayName Model-Driven
- 22. AngularJS User Group Taiwan 兩者的比較 Template-Driven •真相的來源: Template • Directive 建立新的 controls • 隱性的建立 • 真相的來源: Component class • Directives 綁定存在的 controls • 顯性的建立 Model-Driven
- 23. AngularJS User Group Taiwan •Angular 2 Forms • Angular 2 Dynamic Forms • Introduction to Angular 2 Forms - Template Driven vs Model Driven or Reactive Forms • Webinar: latest Angular 2 Forms • Angular 2 Forms Course Sample Reference
- 24.
- 25.
Editor's Notes
- #10 Angular 會到 Template 尋找有 ngModel 的 form control 建立實體 每個 form control 的實體都會有以下的 model ngModel 用來建立一個 FormControl 的實體，並將它綁定到一個表單控制項元素 從域模型創建一個FormControl實例，並將其綁定到一個表單控件元素。 FormControl 實體會追蹤 value、 user 互動、及控制項的驗證狀態，並且保持 model 與 View 同步。 如果用父層級的表單建立，directive 也會作為子控制項的表單自行註冊