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 相关文章推荐
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
Dec 29 Javascript
JavaScript中使用构造函数实现继承的代码
Aug 12 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
Jun 05 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
Jul 29 Javascript
js实现类似jquery里animate动画效果的方法
Apr 10 Javascript
Javascript中的getUTCHours()方法使用详解
Jun 10 Javascript
KnockoutJS 3.X API 第四章之click绑定
Oct 10 Javascript
bootstrapValidator自定验证方法写法
Dec 01 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
Feb 07 Javascript
详解webpack 多入口配置
Jun 16 Javascript
bootstrap是什么_动力节点Java学院整理
Jul 14 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
Aug 07 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
PHP mb_convert_encoding 获取字符串编码类型实现代码
2009/04/26 PHP
PHP设计模式 注册表模式(多个类的注册)
2012/02/05 PHP
使用openssl实现rsa非对称加密算法示例
2014/01/24 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
PHP面向对象五大原则之单一职责原则(SRP)详解
2018/04/04 PHP
Jquery拖拽并简单保存的实现代码
2010/11/28 Javascript
最佳的addEvent事件绑定是怎样诞生的
2011/10/24 Javascript
javaScript arguments 对象使用介绍
2013/10/18 Javascript
javascript实例--教你实现扑克牌洗牌功能
2014/05/15 Javascript
javascript 小数取整简单实现方式
2014/05/30 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
2017/01/05 Javascript
写jQuery插件时的注意点
2017/02/20 Javascript
js实现上下左右弹框划出效果
2017/03/08 Javascript
微信小程序 侧滑删除(左滑删除)
2017/05/23 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
2017/06/14 Javascript
微信小程序实现topBar底部选择栏效果
2018/07/20 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
2019/10/16 Javascript
js简单实现自动生成表格功能示例
2020/06/02 Javascript
PHP webshell检查工具 python实现代码
2009/09/15 Python
python实现电子词典
2020/04/23 Python
Python编程入门之Hello World的三种实现方式
2015/11/13 Python
python3.6+opencv3.4实现鼠标交互查看图片像素
2018/02/26 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
[原创]赚疯了!转手立赚800+?大佬的python「抢茅台脚本」使用教程
2021/01/12 Python
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
2019/11/01 HTML / CSS
C#中的验证控件有几种
2014/03/08 面试题
干部选拔任用方案
2014/05/26 职场文书
公司向个人借款协议书范本
2014/10/09 职场文书
党员转正党支部意见
2015/06/02 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书
保外就医申请书范文
2015/08/06 职场文书
八年级作文之一起的走过日子
2019/09/17 职场文书
pandas时间序列之pd.to_datetime()的实现
2022/06/16 Python