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 相关文章推荐
JS 屏蔽键盘不可用与鼠标右键不可用的方法
Nov 18 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
Oct 31 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
May 09 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 Javascript
详解Javascript百度地图接口开发文档中的类和方法
Feb 07 Javascript
vue获取DOM元素并设置属性的两种实现方法
Sep 30 Javascript
Angular2的管道Pipe的使用方法
Nov 07 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
Oct 07 Javascript
vue如何截取字符串
May 06 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
Sep 01 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
拼音码表的生成
2006/10/09 PHP
国外比较好的几个的Php开源建站平台小结
2010/04/22 PHP
Codeigniter(CI)框架分页函数及相关知识
2014/11/03 PHP
php自定义hash函数实例
2015/05/05 PHP
php自定义中文字符串截取函数substr_for_gb2312及substr_for_utf8示例
2016/05/28 PHP
PHP获取用户客户端真实IP的解决方案
2016/10/10 PHP
php array_merge_recursive 数组合并
2016/10/26 PHP
javaScript 关闭浏览器 (不弹出提示框)
2010/01/31 Javascript
JavaScript DOM学习第四章 getElementByTagNames
2010/02/19 Javascript
解决JS浮点数运算出现Bug的方法
2013/03/12 Javascript
JQuery实现表格中相同单元格合并示例代码
2013/06/26 Javascript
jquery html动态生成select标签出问题的解决方法
2013/11/20 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
2013/11/21 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
2014/06/24 Javascript
js实现class样式的修改、添加及删除的方法
2015/01/20 Javascript
jQuery中animate的几种用法与注意事项
2016/12/12 Javascript
详解webpack 多入口配置
2017/06/16 Javascript
最基础的vue.js双向绑定操作
2017/08/23 Javascript
微信小程序scroll-view组件实现滚动动画
2018/01/31 Javascript
nodejs的路径问题的解决
2018/06/30 NodeJs
基于Vue实现可以拖拽的树形表格实例详解
2018/10/18 Javascript
Python中使用OpenCV库来进行简单的气象学遥感影像计算
2016/02/19 Python
深入解析Python中函数的参数与作用域
2016/03/20 Python
Python类的继承和多态代码详解
2017/12/27 Python
python中cPickle类使用方法详解
2018/08/27 Python
Python面向对象之类的定义与继承用法示例
2019/01/14 Python
python使用自定义钉钉机器人的示例代码
2020/06/24 Python
MoviePy简介及Python视频剪辑自动化
2020/12/18 Python
python 求两个向量的顺时针夹角操作
2021/03/04 Python
css3实现wifi信号逐渐增强效果实例
2017/08/09 HTML / CSS
APM Monaco中国官网:来自摩纳哥珠宝品牌
2017/12/27 全球购物
Quiksilver荷兰官方网站:冲浪和滑雪板
2019/11/16 全球购物
报名委托书
2015/01/29 职场文书
基于python实现银行管理系统
2021/04/20 Python
python字典的元素访问实例详解
2021/07/21 Python