Angular 2 Taiwan 小聚 Forms 介紹

AngularJS User Group Taiwan

Angular 2 FormsTemplate-Driven v.s. Model-Driven

多奇數位創意有限公司前端工程師吳承翰 ( Jeff )部落格： http://[email protected]


• 什麼是 Angular Forms• Template-driven 介紹• Model-driven 介紹• Demo

• Template-driven• Model-driven

• Reference

Agenda


嗨！我是 Jeff我是 Front-End developer我在多奇數位創意


在開始之前 ...你有玩過 Angular 2 嗎？


• 需要先安裝 node.js & npm• npm install -g angular-cli typescript• ng new porjectName • cd projectName• ng serve

快速建立 Project 三步驟


Angular Forms它，能為我們做些什麼？


Angular Forms 的用途 ?

• 基本用途• 將表單資料進行序列化• 提供初始預設資料• 驗證表單資料• 顯示有幫助的錯誤提示訊息

• 進階用途• 自訂表單控制項（ Form Controls ）• 自訂驗證器（ Validators ）• 動態建立控制項


Angular Forms 提供了兩種方式來處理表單

Template-driven 和 Model-driven


Template Driven Forms就像 Angular 1 一樣的，易懂實用。


• 和 Angular 1 一樣有 ng-model directive.• 只能進行 End to End 測試• 需要有 DOM 的存在

• Import Module ： FormsModule• 可使用以下 directives 建立： • ngForm• ngModel• ngModelGroup

Template Driven


View

• <input name="firstName" type="text" ngModel>

• 注意• 一定要加 name ，很重要• 依需求用 ngModel 指定

component 的 model

Model

• value• valid/invalid• pristine/dirty• touched/untouched• errors

來源： Kara Erickson

https://www.youtube.com/watch?v=E92KS_YCSf8




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






FormControlname: street

FormControlname: city

FormControlname: state

FormControlname: zip






FormControlname: street

FormControlname: city

FormControlname: state

FormControlname: zip

Form Group • value• valid / invalid• pristine / dirty• touched /

untouched• errors

• get('street')• hasError ()• ...






• 提供追蹤表單及欄位狀態• 依照狀態提供的 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 ;)


Model Driven Forms面對各種奇葩需求，更能禁得起考驗。


• Import Module ： ReactiveFormsModule • 由 Directives 綁定存在的控制項• 適合處理複雜的邏輯、動態的表單內容• 表單驗證邏輯可進行單元測試（ Unit Test ）

Model Driven Forms


• FormControlName• FormGroupName• FormArrayName

Model Driven 常用的 Directives


DemoShow you something cool ;)


常用的 Directives

Template-Driven

• ngModel

• ngModelGroup

• ngForm

• FormControlName

• FormGroupName

• FormArrayName

Model-Driven


兩者的比較 Template-Driven

• 真相的來源 : Template

• Directive 建立新的 controls

• 隱性的建立

• 真相的來源 : Component class

• Directives 綁定存在的 controls

• 顯性的建立

Model-Driven


• 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

https://angular.io/docs/ts/latest/guide/forms.html

https://angular.io/docs/ts/latest/cookbook/dynamic-form.html

http://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/

http://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/


https://www.youtube.com/watch?v=Yfebo2mFrTU


加入社團使你不孤單寂寞，覺得冷。


Thank you

Angular 2 Taiwan 小聚 Forms 介紹

Technology

Transcript of Angular 2 Taiwan 小聚 Forms 介紹