本系列文集：來扯點ionic3
當我們有了一個表單，要如何處理表單中的數據？
回顧前端技術的發展，最早我們通過 form 的形式，將表單直接 get/post 給服務器，后來有了 ajax 技術，我們提取出表單中的數據，在不刷新頁面的情況下就能與服務器進行交互。
假設頁面上有一個 id 為 username 的表單，腳本中有一個名為 username 的全局變量，怎么讓將二者綁定起來。
document.getElementById('username').value=username;
username=document.getElementById('username').value;
在傳統的網頁中，我們通過不斷觸發調用這兩條語句中，而讓視圖中的值和業務腳本中的值保持一致。
在很多時候，我們希望模型和視圖是始終同步的：當模型發生變化，就會觸發視圖發生變化；當視圖被更新，也會觸發模型的更新。這一些的實現歸功于Angular中一個重要的特性：雙向綁定。
表單數據雙向綁定
此時我們的組件中，有這樣的一個成員name：
export class HomePage {
name:string="Tony Stark";
...
}
我們把模板中已經準備好的 input 組件通過指令和 name 進行雙向綁定。
<ion-list>
<ion-item>
<ion-label fixed>Name</ion-label>
<ion-input type="text" [(ngModel)]="name"></ion-input>
</ion-item>
</ion-list>
其中 [(ngModel)] 就是將表單和頁面組件綁定在一起的橋梁，當一個表單被綁定到某個屬性成員上時，它的value就自然等于這個屬性的值。
那么，當用戶改變了表單里的值，屬性成員是否會像我們預期的那樣發生改變呢？我將 name 這一屬性通過模板語法 {{name}} 輸出到了頁面上，下面的動圖展示了表單更新時屬性成員的表現：
一切就這么簡單，這就意味著未來我們在開發表單的時候，只要將表單和變量進行綁定，它們之間的同步可以完全交給框架來做，我們最后只需要處理組件中的這些數據，而不需要再編寫代碼與表單進行交互。
綁定一個對象的成員
對于像這樣的一個對象
obj:any={
id:100
}
可以這樣綁定
<ion-input type="text" [(ngModel)]="obj.id"></ion-input>
Radio 的綁定
對于Radio空間，[(ngModel)]并非直接加在 ion-radio 標簽上，而是加在綁定了 ion-radio-group 指令的 ion-list 標簽上。
<ion-list radio-group [(ngModel)]="gender">
<ion-list-header>請選擇性別</ion-list-header>
<ion-item>
<ion-label fixed>我是男生</ion-label>
<ion-radio value="男"></ion-radio>
</ion-item>
<ion-item>
<ion-label fixed>我是女生</ion-label>
<ion-radio value="女"></ion-radio>
</ion-item>
</ion-list>
框架會匹配模型的值和 group 中每個 radio 的value，相等的 radio 會默認選中，比如這個例子中 gender 在聲明時就被賦值為 "女"。
gender:string="女";
Toggle 的綁定
Toggle 組件應該綁定一個布爾變量。
Select 的綁定
Select 組件應將數據綁定在 ion-select 標簽上，注意當 multiple="true" 是，select的值應該是一個數組。
hobbies:string[]=['足球','電影'];
<ion-list>
<ion-item>
<ion-label>興趣愛好[圖片上傳中...(7.3.gif-46356f-1511168830451-0)]
</ion-label>
<ion-select multiple="true" [(ngModel)]="hobbies">
<ion-option value="足球">足球</ion-option>
<ion-option value="籃球">籃球</ion-option>
<ion-option value="閱讀">閱讀</ion-option>
<ion-option value="電影">電影</ion-option>
<ion-option value="旅行">旅行</ion-option>
</ion-select>
</ion-item>
</ion-list>
Range的綁定
Range 應該綁定一個 number 型變量，或者一個可以通過 parseInt 轉換成 number 的字符串。
這兩種都是可以使用的：
age:number=30;
age:string="30";
這種情況也不會出錯：
age:string="30歲";
但是這種就可能引發 NaN 的錯誤:
age:string="thirty";
如果為 range 添加了 dualKnobs="true" 的屬性（雙滑塊），則需要綁定一個包含 lower 和 upper 兩個成員的對象。
age:object={
lower:25,
upper:35
}
Datetime 的綁定
Datetime 組件綁定一個字符串。但是這個字符串的格式是什么樣的呢？如果這個字符串的 displayFormat 是 "YYYY-MM-DD" ，那么字符串也需要使用一致的格式嗎？
我們可以讓字符串默認為空置，通過更改表單先輸出一個值。
似乎符合預期，這時把 displayFormat 改為中文的形式：
這時我們發現，datetime組件的值并不和我們看到的格式保持一致，那的格式是基于什么樣的標準呢？實際上它采用了 ISO 8601 的日期格式標準，它是這樣子的：
2017
2017-11
2017-11-20
2017-11-20T17:30
2017-11-20T17:30:55Z
17:30
17:55
也就是說，在單純只有日期或時間的情況下，和我們熟悉的 YYYY-MM-DD HH:mm:ss 的格式是一致的，但是同時存在日期和時間的情況下，就要注意它的寫法了。
所以說，不論 displayFormat 的格式是什么，最后我們拿到都是這種格式的字符串，你可以直接以這樣一個格式和服務器進行交互。但是如果你的數據庫采用了的這一字段采用了 datetime 格式，則需要進行一個轉換。
