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 事件记录使用说明
Oct 20 Javascript
基于JQUERY的多级联动代码
Jan 24 Javascript
js用正则表达式来验证表单(比较齐全的资源)
Nov 17 Javascript
用C/C++来实现 Node.js 的模块(一)
Sep 24 Javascript
当jquery ajax遇上401请求的解决方法
May 19 Javascript
jQuery实现点击关注和取消功能
Jul 03 jQuery
浅谈Webpack核心模块tapable解析
Sep 11 Javascript
JavaScript 2018 中即将迎来的新功能
Sep 21 Javascript
vue-router权限控制(简单方式)
Oct 29 Javascript
vue element upload实现图片本地预览
Aug 20 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
Aug 14 Javascript
详解JavaScript原型与原型链
Nov 16 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中数组定义的几种方法
2013/09/01 PHP
使用YUI+Ant 实现JS CSS压缩
2014/09/02 PHP
jQuery+Ajax+PHP“喜欢”评级功能实现代码
2015/10/08 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
Prototype使用指南之form.js
2007/01/10 Javascript
一组JS创建和操作表格的函数集合
2009/05/07 Javascript
jquery ajax跨域解决方法(json方式)
2014/02/04 Javascript
javascript模拟评分控件实现方法
2015/05/13 Javascript
禁止按回车键提交表单的方法
2015/06/11 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
2016/08/24 Javascript
Angular4自制一个市县二级联动组件示例
2017/11/21 Javascript
vue-cli webpack2项目打包优化分享
2018/02/07 Javascript
Django中URLconf和include()的协同工作方法
2015/07/20 Python
python基础教程项目四之新闻聚合
2018/04/02 Python
python+pandas生成指定日期和重采样的方法
2018/04/11 Python
Python实现手写一个类似django的web框架示例
2018/07/20 Python
selenium+python自动化测试之鼠标和键盘事件
2019/01/23 Python
Python opencv实现人眼/人脸识别以及实时打码处理
2019/04/29 Python
python爬虫实现中英翻译词典
2019/06/25 Python
django 捕获异常和日志系统过程详解
2019/07/18 Python
Python人工智能之路 jieba gensim 最好别分家之最简单的相似度实现
2019/08/13 Python
Python2.7:使用Pyhook模块监听鼠标键盘事件-获取坐标实例
2020/03/14 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
Selenium向iframe富文本框输入内容过程图解
2020/04/10 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
Cocopanda波兰:购买化妆品、护肤品、护发和香水
2020/05/25 全球购物
C#实现启动一个进程
2016/10/01 面试题
青年文明号创建承诺
2014/03/31 职场文书
节约用水演讲稿
2014/05/21 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
张家口市高新区党工委群众路线教育实践活动整改方案
2014/10/25 职场文书
民事辩护词范文
2015/05/21 职场文书
Python 实现绘制子图及子图刻度的变换等问题
2021/05/31 Python
星际争霸 Light vs Action 一场把教主看到鬼畜的比赛
2022/04/01 星际争霸
Ubuntu Server 安装Tomcat并配置systemctl
2022/04/28 Servers