Angular4 學習歷程之——表單

angular4的表單有兩種構建技術

1. 響應式表單
2. 模板驅動表單

這兩項技術都屬於@angular/forms庫，而且共享一組公共的表單控件類。

可是它們在設計哲學、編程風格和具體技術上有顯著區別。 因此，它們都有本身的模塊：ReactiveFormsModule 和 FormsModule。

  1.響應式表單  

　　相關介紹

　　響應式表單能夠在組件中建立表單控件的對象樹，並把它們綁定到組件模板中的原生表單控件元素上。

　　balabala....

　　相關的介紹在:https://angular.cn/docs/ts/latest/guide/reactive-forms.html

　　使用方法

　　導入ReactiveFormsModule

　　1.須要在app.modules.ts中 導入ReactiveFormsModule

  

　　2.在@NgModule中imports ReactiveFormsModule

　　

　　這樣就能夠在任意地方調用了。

　　添加FormGroup 　

　　1.若是有多個FormControl，咱們會但願把它們註冊進一個父FormGroup中。這很容易。只要把它加入 hero-detail.component.ts 的 import 區就能夠了。

　　

　　2.定義一個from，用於存放須要提交的數據

　　

　　3.再把FormControl包裹進獲取數據的方法中便可

　　

　　定義一個group對象，用來緩存要提交的表單屬性名，

　　item.required表示是否須要驗證，就須要加入一個驗證器 required驗證器：Validators.required，

　　要使用驗證器，須要先導入 Validators，上圖已經導入過

　　1. FormControl 是將某一項內容的值和有效狀態 進行跟蹤，一般會有不少個須要跟蹤的屬性

　　2. Validators.required 驗證器

　　3. FormGroup 能夠將多個 FormControl 包裹進去

　　注意：這裏的FormControl 、FormGroup 都須要實例化

 　傳值到子組件

　　在組件引用的最外面使用：　　注意的是在組件引用層 [formGroup]="form" 必定要放在form中，組件中一樣須要  [formGroup]="form" 

　　<form  [formGroup]="form">

　　　　....

　　<form>

 

　　1. 經過  [form]="form" 傳遞屬性值到子組件中，經過　[lists]="record" 傳遞表單數據到子組件中

　　

　　須要注意的是：lists、form、submit等都須要本身在子組件中 使用 Input 裝飾器代表它們是輸入屬性。

　　屬性指令：https://angular.cn/docs/ts/latest/guide/attribute-directives.html#!#why-input

　　2.子組件獲取值

　　

　　一般傳遞過來的值是在 ionViewDidLoad(){...} 中能夠直接拿到，

　　3. 組件頁面

　　

　　組件頁面一樣須要 [formGroup]="form"

　　

　　到這裏基本就已經能夠根據本身的須要進行拓展了。

 

  2.模板驅動表單  

　　未完待續...