来扯点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