Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法


Posted in Javascript onJune 29, 2017

“对呀对呀!……回字有四样写法,你知道么?”,当时鲁大大如此讽刺孔乙己,意味着老孔这个被科举制毒害的人注意此种无用之物实在可悲。但是在Angular 2的世界中,很少存在无用之物,ngModel有三种写法,你知道吗?

表单的设计永远都是应用的重头戏,而其中最基本的功能点即是通过一个个输入组件实现的,为此Angular 2为我们提供了锋利的武器:ngModel。而其不同的使用方式有着大不相同的作用:

ngModel

如果单独使用ngModel,且没有为其赋值的话,它会在其所在的ngForm.value对象上添加一个property,此property的key值为ngModel所在组件设置的name属性的值:

<form novalidate #f="ngForm">
 <input type='text' name='userName' placeholder='Input your userName' ngModel>
</form>
<p>
 {{ f.value | json }} // { "userName": "" }
</p>

此时需要注意的是,单独使用ngModel时,如果没有为ngModel赋值的话,则必须存在name属性。

也就是说,单独ngModel的作用是通知ngForm.value,我要向你那里加入一个property,其key值是组件的name属性值,其value为空字符串。

[ngModel]

可是,如果想向ngForm中添加一个有默认值的property需要怎么做呢?这时就需要使用单向数据绑定的格式了,也就是[ngModel]:

this.model = {
 userName: 'Casear'
};

<form novalidate #f="ngForm">
 <input type='text' name='userName' placeholder='Input your userName' [ngModel]='model.userName'>
</form>
<p>
 {{ f.value | json }} // { "userName": "Casear" }
 {{ model | json }}  // { "userName": "Casear" },不会随着f.value的变化而变化
</p>

这里我们使用了单向数据绑定的特点,可以为ngForm.value添加一个带有初始值的property。

注意单向数据绑定的特点,此时在表单输入框中做的任何改变都不会影响model中的数据,也就是说this.model.userName不会随着输入框的改变而改变。不过输入框改变会体现在f.value中。

[(ngModel)]

上述的单向数据绑定在单纯地提供初始值很有用,不过总是有些场景需要将用户输入体现在我们的model上,此时就需要双向数据绑定了,也即[(ngModel)]:

this.model = {
 userName: 'Casear'
};

<form novalidate #f="ngForm">
 <input type='text' name='userName' placeholder='Input your userName' [(ngModel)]='model.userName'>
</form>
<p>
 {{ f.value | json }} // { "userName": "Casear" }
 {{ model | json }}  // { "userName": "Casear" },会随着f.value的变化而变化
</p>

这里我们不仅为ngForm.value添加了一个带有初始值的property,还能实现Model和View层的联动,尽管这种方式可能并不好,但是在某些情况下也不失为一种简便的方案。

关于[(ngModel)]的内部逻辑可查看Angular 2 父子组件数据通信。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用jQuery技术实现Tab页界面之二
Sep 21 Javascript
JS判断两个时间大小的示例代码
Jan 28 Javascript
javascript将相对路径转绝对路径示例
Mar 14 Javascript
关于jQuery判断元素是否存在的问题示例探讨
Jul 21 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
Aug 04 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
Mar 14 Javascript
利用Angular.js编写公共提示模块的方法教程
May 28 Javascript
webpack 1.x升级过程中的踩坑总结大全
Aug 09 Javascript
如何安装控制器JavaScript生成插件详解
Oct 21 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
Aug 07 Javascript
js 闭包深入理解与实例分析
Mar 19 Javascript
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
JavaScript之iterable_动力节点Java学院整理
Jun 29 #Javascript
JavaScript之Map和Set_动力节点Java学院整理
Jun 29 #Javascript
JavaScript之面向对象_动力节点Java学院整理
Jun 29 #Javascript
JavaScript之json_动力节点Java学院整理
Jun 29 #Javascript
JavaScript之RegExp_动力节点Java学院整理
Jun 29 #Javascript
详解微信小程序设置底部导航栏目方法
Jun 29 #Javascript
详解vue2父组件传递props异步数据到子组件的问题
Jun 29 #Javascript
You might like
php+mysql实现无限级分类 | 树型显示分类关系
2006/11/19 PHP
php获取apk包信息的方法
2014/08/15 PHP
PHP通过插入mysql数据来实现多机互锁实例
2014/11/05 PHP
php提取身份证号码中的生日日期以及验证是否为成年人的函数
2015/09/29 PHP
php+croppic.js实现剪切上传图片功能
2018/08/14 PHP
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
2010/06/12 Javascript
jquery删除ID为sNews的tr元素的内容
2014/04/10 Javascript
Javascript数据结构与算法之列表详解
2015/03/12 Javascript
js实现顶部可折叠的菜单工具栏效果实例
2015/05/09 Javascript
javascript表格的渲染组件
2015/07/03 Javascript
jquery实现多条件筛选特效代码分享
2015/08/28 Javascript
javascript生成随机数方法汇总
2015/11/12 Javascript
整理Javascript数组学习笔记
2015/11/29 Javascript
利用jquery制作滚动到指定位置触发动画
2016/03/26 Javascript
利用jQuery对无序列表排序的简单方法
2016/10/16 Javascript
第一次记录Bootstrap table学习笔记(1)
2017/05/18 Javascript
react-native ListView下拉刷新上拉加载实现代码
2017/08/03 Javascript
自定义vue组件发布到npm的方法
2018/05/09 Javascript
layui实现数据表格隐藏列的示例
2019/10/25 Javascript
JQuery中的常用事件、对象属性与使用方法分析
2019/12/23 jQuery
微信小程序自定义弹出层效果
2020/05/26 Javascript
[01:08:48]LGD vs OG 2018国际邀请赛淘汰赛BO3 第三场 8.25
2018/08/29 DOTA
Python文件和流(实例讲解)
2017/09/12 Python
Python实现的HMacMD5加密算法示例
2018/04/03 Python
Python使用pandas处理CSV文件的实例讲解
2018/06/22 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
python中从for循环延申到推导式的具体使用
2019/11/29 Python
使用tensorflow显示pb模型的所有网络结点方式
2020/01/23 Python
Tensorflow 多线程与多进程数据加载实例
2020/02/05 Python
Python制作简单的剪刀石头布游戏
2020/12/10 Python
详解Java中一维、二维数组在内存中的结构
2021/02/11 Python
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
JD Sports德国官网:英国领先的运动鞋和运动服饰零售商
2018/02/26 全球购物
介绍一些UNIX常用简单命令
2014/11/11 面试题
2014年党支部学习材料
2014/05/19 职场文书
2019客服个人年终工作总结范文
2019/07/08 职场文书