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 相关文章推荐
Javascript 修改String 对象 增加去除空格功能(示例代码)
Nov 30 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
Jan 22 Javascript
教你如何使用node.js制作代理服务器
Nov 26 Javascript
Javascript中的高阶函数介绍
Mar 15 Javascript
JavaScript动态修改背景颜色的方法
Apr 16 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
Mar 29 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
微信小程序实现留言板(Storage)
Nov 02 Javascript
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
如何阻止小程序遮罩层下方图层滚动
Sep 05 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
Sep 21 Javascript
小程序如何自主实现拦截器的示例代码
Nov 04 Javascript
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
在线增减.htpasswd内的用户
2006/10/09 PHP
用windows下编译过的eAccelerator for PHP 5.1.6实现php加速的使用方法
2007/09/30 PHP
PHP中创建和验证哈希的简单方法实探
2015/07/06 PHP
浅谈php中urlencode与rawurlencode的区别
2016/09/05 PHP
使用PHPExcel实现数据批量导出为excel表格的方法(必看)
2017/06/09 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
JavaScript 高效运行代码分析
2010/03/18 Javascript
JS遮罩层效果 兼容ie firefox jQuery遮罩层
2010/07/26 Javascript
工作需要写的一个js拖拽组件
2011/07/28 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
2014/01/11 Javascript
js实现无缝滚动特效
2015/12/20 Javascript
Ionic默认的Tabs模板使用实例
2016/08/29 Javascript
js HTML5手机刮刮乐代码
2020/09/29 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
2016/12/29 Javascript
通过js控制时间,一秒一秒自己动的实例
2017/10/25 Javascript
9种改善AngularJS性能的方法
2017/11/28 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
2018/02/21 Javascript
基于ionic实现下拉刷新功能
2018/05/10 Javascript
Vue 实现列表动态添加和删除的两种方法小结
2018/09/07 Javascript
原生js实现的移动端可拖动进度条插件功能详解
2019/08/15 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
2020/04/07 Javascript
python自定义解析简单xml格式文件的方法
2015/05/11 Python
Python实现字典的key和values的交换
2015/08/04 Python
如何使用Python的Requests包实现模拟登陆
2018/04/27 Python
python向已存在的excel中新增表,不覆盖原数据的实例
2018/05/02 Python
如何关掉pycharm中的python console(图解)
2019/10/31 Python
Django使用消息提示简单的弹出个对话框实例
2019/11/15 Python
Python多线程获取返回值代码实例
2020/02/17 Python
CSS3中设置3D变形的transform-style属性详解
2016/05/23 HTML / CSS
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
2015/03/27 HTML / CSS
荷兰皇家航空公司官方网站:KLM Royal Dutch Airlines
2017/12/07 全球购物
客户代表实习人员自我鉴定
2013/09/27 职场文书
道士塔读书笔记
2015/06/30 职场文书
浅谈MySQL函数
2021/10/05 MySQL