Angular 2 Taiwan 小聚 Forms 介紹
•Download as PPTX, PDF•
4 likes•713 views
Template-Driven v.s. Model-Driven
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Angular 2 Taiwan 小聚 Forms 介紹
Similar to Angular 2 Taiwan 小聚 Forms 介紹 (20)
Angular 2 Taiwan 小聚 Forms 介紹
- 1. AngularJS User Group Taiwan Angular 2 Forms Template-Driven v.s. Model-Driven 多奇數位創意有限公司 前端工程師 吳承翰 ( Jeff ) 部落格：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 嗨！ 我是 Jeff 我是 Front-End developer 我在多奇數位創意
- 4. AngularJS User Group Taiwan 在開始之前... 你有玩過 Angular 2 嗎？
- 5. AngularJS User Group Taiwan • 需要先安裝 node.js & npm • npm install -g angular-cli typescript • ng new porjectName • cd projectName • ng serve 快速建立 Project 三步驟
- 6. AngularJS User Group Taiwan Angular Forms 它，能為我們做些什麼？
- 7. AngularJS User Group Taiwan Angular Forms 的用途? • 基本用途 • 將表單資料進行序列化 • 提供初始預設資料 • 驗證表單資料 • 顯示有幫助的錯誤提示訊息 • 進階用途 • 自訂表單控制項（Form Controls） • 自訂驗證器（Validators） • 動態建立控制項
- 8. AngularJS User Group Taiwan Angular Forms 提供了兩種方式來處理表單 Template-driven 和 Model-driven
- 9. AngularJS User Group Taiwan Template Driven Forms 就像 Angular 1 一樣的，易懂實用。
- 10. AngularJS User Group Taiwan • 和 Angular 1 一樣有 ng-model directive. • 只能進行 End to End 測試 • 需要有 DOM 的存在 • Import Module：FormsModule • 可使用以下 directives 建立： • ngForm • ngModel • ngModelGroup Template Driven
- 11. 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
- 12. 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
- 13. AngularJS User Group Taiwan FormControl name: street FormControl name: city FormControl name: state FormControl name: zip 來源： Kara Erickson
- 14. 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
- 15. 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
- 16. AngularJS User Group Taiwan Demo Show you something cool ;)
- 17. AngularJS User Group Taiwan Model Driven 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. AngularJS User Group Taiwan Demo Show you something cool ;)
- 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
Editor's Notes
- 本次分享主要對象為有使用過 Angular 2 進行開發的朋友，若你還沒有接觸過 Angular 2，就較可能聽不太懂了。 有興趣的話可以去報名保哥的 Angular 2 開發實戰-新手上路篇，快速上手！ http://www.accupass.com/go/DCT_105026
- Angular 會到 Template 尋找有 ngModel 的 form control 建立實體 每個 form control 的實體都會有以下的 model ngModel 用來建立一個 FormControl 的實體，並將它綁定到一個表單控制項元素 從域模型創建一個FormControl實例，並將其綁定到一個表單控件元素。 FormControl 實體會追蹤 value、 user 互動、及控制項的驗證狀態，並且保持 model 與 View 同步。 如果用父層級的表單建立，directive 也會作為子控制項的表單自行註冊