Download - Angular 2 表單的處理與驗證
![Page 1: Angular 2 表單的處理與驗證](https://reader036.vdocuments.net/reader036/viewer/2022070516/5872a8651a28ab07208b72d3/html5/thumbnails/1.jpg)
AngularJS User Group Taiwan
Angular 2 Forms表單的處理與驗證
多奇數位創意有限公司前端工程師 吳承翰 ( Jeff W u)部落格: http://jeffwu85182.github.io
![Page 2: Angular 2 表單的處理與驗證](https://reader036.vdocuments.net/reader036/viewer/2022070516/5872a8651a28ab07208b72d3/html5/thumbnails/2.jpg)
AngularJS User Group Taiwan
• 什麼是 Angular Forms• Template-driven 介紹• Model-driven 介紹• Demo• Template-driven• Model-driven
• Reference
Agenda
![Page 3: Angular 2 表單的處理與驗證](https://reader036.vdocuments.net/reader036/viewer/2022070516/5872a8651a28ab07208b72d3/html5/thumbnails/3.jpg)
AngularJS User Group Taiwan
• 需要先安裝 node.js & npm• npm install -g angular-cli typescript• ng new porjectName • cd projectName• ng serve
快速建立 Project 三步驟
![Page 4: Angular 2 表單的處理與驗證](https://reader036.vdocuments.net/reader036/viewer/2022070516/5872a8651a28ab07208b72d3/html5/thumbnails/4.jpg)
AngularJS User Group Taiwan
Angular Forms它,能為我們做些什麼?
![Page 5: Angular 2 表單的處理與驗證](https://reader036.vdocuments.net/reader036/viewer/2022070516/5872a8651a28ab07208b72d3/html5/thumbnails/5.jpg)
AngularJS User Group Taiwan
Angular Forms 的用途 ?
• 基本用途• 將表單資料進行序列化• 提供初始預設資料• 驗證表單資料• 顯示有幫助的錯誤提示訊息
• 進階用途• 自訂表單控制項( Form Controls )• 自訂驗證器( Validators )• 動態建立控制項
![Page 6: Angular 2 表單的處理與驗證](https://reader036.vdocuments.net/reader036/viewer/2022070516/5872a8651a28ab07208b72d3/html5/thumbnails/6.jpg)
AngularJS User Group Taiwan
Angular Forms 提供了兩種方式來處理表單
Template-driven 和 Model-driven
![Page 7: Angular 2 表單的處理與驗證](https://reader036.vdocuments.net/reader036/viewer/2022070516/5872a8651a28ab07208b72d3/html5/thumbnails/7.jpg)
AngularJS User Group Taiwan
Template Driven Forms就像 Angular 1 一樣的,易懂實用。
![Page 8: Angular 2 表單的處理與驗證](https://reader036.vdocuments.net/reader036/viewer/2022070516/5872a8651a28ab07208b72d3/html5/thumbnails/8.jpg)
AngularJS User Group Taiwan
• 和 Angular 1 一樣有 ng-model directive.• 只能進行 End to End 測試• 需要有 DOM 的存在
• Import Module : FormsModule• 可使用以下 directives 建立: • ngForm• ngModel• ngModelGroup
Template Driven
![Page 9: Angular 2 表單的處理與驗證](https://reader036.vdocuments.net/reader036/viewer/2022070516/5872a8651a28ab07208b72d3/html5/thumbnails/9.jpg)
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
![Page 10: Angular 2 表單的處理與驗證](https://reader036.vdocuments.net/reader036/viewer/2022070516/5872a8651a28ab07208b72d3/html5/thumbnails/10.jpg)
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
![Page 11: Angular 2 表單的處理與驗證](https://reader036.vdocuments.net/reader036/viewer/2022070516/5872a8651a28ab07208b72d3/html5/thumbnails/11.jpg)
AngularJS User Group Taiwan
FormControlname: street
FormControlname: city
FormControlname: state
FormControlname: zip
來源: Kara Erickson
![Page 12: Angular 2 表單的處理與驗證](https://reader036.vdocuments.net/reader036/viewer/2022070516/5872a8651a28ab07208b72d3/html5/thumbnails/12.jpg)
AngularJS User Group Taiwan
FormControlname: street
FormControlname: city
FormControlname: state
FormControlname: zip
Form Group • value• valid / invalid• pristine / dirty• touched /
untouched• errors
• get('street')• hasError ()• ...
來源: Kara Erickson
![Page 13: Angular 2 表單的處理與驗證](https://reader036.vdocuments.net/reader036/viewer/2022070516/5872a8651a28ab07208b72d3/html5/thumbnails/13.jpg)
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
![Page 14: Angular 2 表單的處理與驗證](https://reader036.vdocuments.net/reader036/viewer/2022070516/5872a8651a28ab07208b72d3/html5/thumbnails/14.jpg)
DemoShow you something cool ;)
![Page 15: Angular 2 表單的處理與驗證](https://reader036.vdocuments.net/reader036/viewer/2022070516/5872a8651a28ab07208b72d3/html5/thumbnails/15.jpg)
AngularJS User Group Taiwan
[(ngModel)]"Box of Bananas"
"[ ]" 代表一個從 model 到 view 的單向資料綁定"( )" 代表一個從 view 到 model 的單向資料綁定
[ngModel] (ngModelChange)
![Page 16: Angular 2 表單的處理與驗證](https://reader036.vdocuments.net/reader036/viewer/2022070516/5872a8651a28ab07208b72d3/html5/thumbnails/16.jpg)
AngularJS User Group Taiwan
![Page 17: Angular 2 表單的處理與驗證](https://reader036.vdocuments.net/reader036/viewer/2022070516/5872a8651a28ab07208b72d3/html5/thumbnails/17.jpg)
AngularJS User Group Taiwan
Model Driven Forms面對各種奇葩需求,更能禁得起考驗。
![Page 18: Angular 2 表單的處理與驗證](https://reader036.vdocuments.net/reader036/viewer/2022070516/5872a8651a28ab07208b72d3/html5/thumbnails/18.jpg)
AngularJS User Group Taiwan
• Import Module : ReactiveFormsModule • 由 Directives 綁定存在的控制項• 適合處理複雜的邏輯、動態的表單內容• 表單驗證邏輯可進行單元測試( Unit Test )
Model Driven Forms
![Page 19: Angular 2 表單的處理與驗證](https://reader036.vdocuments.net/reader036/viewer/2022070516/5872a8651a28ab07208b72d3/html5/thumbnails/19.jpg)
AngularJS User Group Taiwan
• FormControlName• FormGroupName• FormArrayName
Model Driven 常用的 Directives
![Page 20: Angular 2 表單的處理與驗證](https://reader036.vdocuments.net/reader036/viewer/2022070516/5872a8651a28ab07208b72d3/html5/thumbnails/20.jpg)
DemoShow you something cool ;)
![Page 21: Angular 2 表單的處理與驗證](https://reader036.vdocuments.net/reader036/viewer/2022070516/5872a8651a28ab07208b72d3/html5/thumbnails/21.jpg)
AngularJS User Group Taiwan
常用的 Directives
Template-Driven• ngModel• ngModelGroup• ngForm
• FormControlName• FormGroupName• FormArrayName
Model-Driven
![Page 22: Angular 2 表單的處理與驗證](https://reader036.vdocuments.net/reader036/viewer/2022070516/5872a8651a28ab07208b72d3/html5/thumbnails/22.jpg)
AngularJS User Group Taiwan
兩者的比較 Template-Driven
• 真相的來源 : Template• Directive 建立新的 controls• 隱性的建立
• 真相的來源 : Component class• Directives 綁定存在的
controls• 顯性的建立
Model-Driven
![Page 23: Angular 2 表單的處理與驗證](https://reader036.vdocuments.net/reader036/viewer/2022070516/5872a8651a28ab07208b72d3/html5/thumbnails/23.jpg)
AngularJS User Group Taiwan
• Angular 2 Forms• Angular 2 Dynamic Forms• Introduction to Angular 2 Forms - Template Driven vs Mo
del Driven or Reactive Forms• Webinar: latest Angular 2 Forms• Angular 2 Forms Course Sample
Reference
![Page 24: Angular 2 表單的處理與驗證](https://reader036.vdocuments.net/reader036/viewer/2022070516/5872a8651a28ab07208b72d3/html5/thumbnails/24.jpg)
加入社團,互相交流一起努力
![Page 25: Angular 2 表單的處理與驗證](https://reader036.vdocuments.net/reader036/viewer/2022070516/5872a8651a28ab07208b72d3/html5/thumbnails/25.jpg)
AngularJS User Group Taiwan
Thank you