摘要：其中就是将表单和页面组件绑定在一起的桥梁，当一个表单被绑定到某个属性成员上时，它的就自然等于这个属性的值。
相关章节：[来扯点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 进行双向绑定。
Name
其中 [(ngModel)] 就是将表单和页面组件绑定在一起的桥梁，当一个表单被绑定到某个属性成员上时，它的value就自然等于这个属性的值。
那么，当用户改变了表单里的值，属性成员是否会像我们预期的那样发生改变呢？我将 name 这一属性通过模板语法 {{name}} 输出到了页面上，下面的动图展示了表单更新时属性成员的表现：
一切就这么简单，这就意味着未来我们在开发表单的时候，只要将表单和变量进行绑定，它们之间的同步可以完全交给框架来做，我们最后只需要处理组件中的这些数据，而不需要再编写代码与表单进行交互。
绑定一个对象的成员对于像这样的一个对象
obj:any={
id:100
}
可以这样绑定
Radio 的绑定
对于Radio空间，[(ngModel)]并非直接加在 ion-radio 标签上，而是加在绑定了 ion-radio-group 指令的 ion-list 标签上。
请选择性别 我是男生 我是女生
框架会匹配模型的值和 group 中每个 radio 的value，相等的 radio 会默认选中，比如这个例子中 gender 在声明时就被赋值为 "女"。
gender:string="女";Toggle 的绑定
Toggle 组件应该绑定一个布尔变量。
Select 组件应将数据绑定在 ion-select 标签上，注意当 multiple="true" 是，select的值应该是一个数组。
hobbies:string[]=["足球","电影"];
Range的绑定兴趣爱好[图片上传中...(7.3.gif-46356f-1511168830451-0)] 足球 篮球 阅读 电影 旅行
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 格式，则需要进行一个转换。
提供参考的文档官方文档：Datetime
Date and Time Formats
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/56872.html
摘要：基本使用请选择选项选项在标签上使用指令，表示其内部的为同一组。标题按钮按钮和上述控件不同，它不使用来构件，而是使用普通的标签配合指令来实现效果并且按钮可以不放置在容器中。 showImg(https://segmentfault.com/img/remote/1460000012146194?w=650&h=350); 表单几乎是每一个应用程序中必不可少的一部分，在各类 HTML 教材...
摘要：我们可以尝试模拟登录的流程来体验这一的使用。制作模板并完成数据绑定在编写表单模板，并使用将每个项目绑定在数据模型上。清除中的用户信息在首页添加注销按钮，清除中的，并跳转回登录页面。 showImg(https://segmentfault.com/img/remote/1460000012146194?w=650&h=350); 一般意义上，一个互联网 APP 中的数据主自与服务器的交...
摘要：雷神上映已经一周，但因为各种原因还没来得去送票房，有多年不见的班纳和洛基娘娘，期待他们在诸神黄昏和明年无限战争中的表现。至此，准备就绪，开始了解第一个指令。参考文档结构型指令 showImg(https://segmentfault.com/img/remote/1460000012145196?w=650&h=350); 《雷神3》上映已经一周，但因为各种原因还没来得去送票房，有多年...
摘要：雷神上映已经一周，但因为各种原因还没来得去送票房，有多年不见的班纳和洛基娘娘，期待他们在诸神黄昏和明年无限战争中的表现。至此，准备就绪，开始了解第一个指令。参考文档结构型指令 showImg(https://segmentfault.com/img/remote/1460000012145196?w=650&h=350); 《雷神3》上映已经一周，但因为各种原因还没来得去送票房，有多年...
摘要：认识的生命周期钩子截至版本，框架提供了个钩子函数，它们分别会在页面生命周期的各个阶段被触发，我们来简单了解一下。而另外两个钩子有些不太一样，它们是可以返回布尔值的和。 showImg(https://segmentfault.com/img/remote/1460000012145196?w=650&h=350); 首先要做一个诚挚的道歉，作为大四狗，因为升学的事情，断更两个月，所以要...
阅读 1057·2023-04-25 15:53
阅读 1888·2021-11-19 09:40
阅读 3252·2021-10-11 10:59
阅读 3673·2021-10-08 10:05
阅读 1888·2019-08-30 15:55
阅读 1777·2019-08-30 15:54
阅读 2131·2019-08-29 13:03
阅读 2578·2019-08-28 18:17
