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