來扯點ionic3[6] 繼續上手錶單：魔法般的雙向數據綁定

相關章節：[來扯點ionic3[5] 輕鬆上手錶單：這些組件能夠玩一年](http://www.jianshu.com/p/b2a4...

當咱們有了一個表單，要如何處理表單中的數據？

回顧前端技術的發展，最先咱們經過 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 格式，則須要進行一個轉換。

提供參考的文檔

1. 官方文檔：Datetime
2. Date and Time Formats