本系列文集：来扯点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}} 输出到了页面上，下面的动图展示了表单更新时属性成员的表现：
动图：Input 双向绑定
一切就这么简单，这就意味着未来我们在开发表单的时候，只要将表单和变量进行绑定，它们之间的同步可以完全交给框架来做，我们最后只需要处理组件中的这些数据，而不需要再编写代码与表单进行交互。
绑定一个对象的成员
对于像这样的一个对象
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="女";
动图：Radio 双向绑定
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>
动图: Select 多选模式下的数据绑定
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
}
动图：双滑块 Range 的数据绑定
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 格式，则需要进行一个转换。
网友评论