Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
“对呀对呀!……回字有四样写法,你知道么?”,当时鲁大大如此讽刺孔乙己,意味着老孔这个被科举制毒害的人注意此种无用之物实在可悲。但是在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 父子组件数据通信。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- SQL Server基础SQL脚本之创建架构、排序
- 枚举算法(Enumeration algorithm)实例一
- 剑指offer代码解析——面试题16反转单链表
- QMainWindow 和 QWidget 设置layout
- 安全工具Aircrack-ng的使用
- Windows Server 2008 R2 搭建微信小程序
- insert事务产生duplicate key error引发的死锁分析
- 零基础入门深度学习 | 第六章:长短时记忆网络(LSTM)
- 第6章 I/O复用:select和poll函数
- 第7章 套接字选项
- 第8章 基本UDP套接字编程
- 第11章 名字与地址转换
- explicit_defaults_for_timestamp参数导致复制中断
- 剑指offer代码解析——面试题15求链表中倒数第K个结点
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 科技爱好者周刊(第 127 期):未来人人开发软件,几乎没人编码
- mac快捷键
- 浅谈Kotlin的Checked Exception机制
- 自研网关:特殊URL功能的开发
- centos7多网卡配置
- vuecli3 build之后静态文件出现404
- Muti-Similarity Loss:考虑了batch中整体距离分布的对比损失函数
- AkShare-中国宏观-社会消费品零售总额
- AkShare-中国宏观-存款准备金率
- AkShare-中国宏观-消费者信心指数
- AkShare-期货数据-COMEX库存数据
- ESP8266和ESP32配置(需使用ROS1和ROS2)
- SpringBoot+Gradle+ MyBatisPlus3.x搭建企业级的后台分离框架
- frp 内网穿透远程桌面(Windows 10)配置
- 你来讲讲AQS是什么吧?都是怎么用的?