“对呀对呀！……回字有四样写法，你知道么？”，当时鲁大大如此讽刺孔乙己，意味着老孔这个被科举制毒害的人注意此种无用之物实在可悲。但是在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 父子组件数据通信。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# angularjs中ng  # model  # angularjs  # ng  # AngularJS解决ng-if中的ng-model值无效的问题  # AngularJS动态绑定ng-options的ng-model实例代码  # AngularJS实践之使用NgModelController进行数据绑定  # AngularJs Understanding the Model Component  # AngularJS基础 ng-model-options 指令简单示例  # AngularJs 弹出模态框（model）  # 深入浅析AngularJS和DataModel  # AngularJS实现Model缓存的方式  # angularjs自定义ng-model标签的属性  # angularjs在ng-repeat中使用ng-model遇到的问题  # 绑定  # 输入框  # 你知道  # 表单  # 之物  # 对呀  # 的人  # 的是  # 也就是说  # 我要  # 还能  # 会在  # 数据通信  # 如果没有  # 仅为  # 为其  # 怎么做  # 时就  # 向你  # 即是 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 简历没回改：利用AI润色让你的文字更专业  Laravel模型关联查询教程_Laravel Eloquent一对多关联写法  Laravel怎么调用外部API_Laravel Http Client客户端使用  Laravel怎么实现观察者模式Observer_Laravel模型事件监听与解耦开发【指南】  原生JS获取元素集合的子元素宽度实例  微信小程序 wx.uploadFile无法上传解决办法  Claude怎样写约束型提示词_Claude约束提示词写法【教程】  香港代理服务器配置指南：高匿IP选择、跨境加速与SEO优化技巧  Laravel如何处理和验证JSON类型的数据库字段  Bootstrap整体框架之CSS12栅格系统  如何为不同团队 ID 动态生成多个非值班状态按钮  Python面向对象测试方法_mock解析【教程】  如何快速建站并高效导出源代码？  Windows10如何删除恢复分区_Win10 Diskpart命令强制删除分区  C#如何调用原生C++ COM对象详解  Win11摄像头无法使用怎么办_Win11相机隐私权限开启教程【详解】  如何快速查询网站的真实建站时间？  香港服务器建站指南：免备案优势与SEO优化技巧全解析  JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)  打造顶配客厅影院，这份100寸电视推荐名单请查收  Laravel怎么进行数据库回滚_Laravel Migration数据库版本控制与回滚操作  nodejs redis 发布订阅机制封装实现方法及实例代码  PythonWeb开发入门教程_Flask快速构建Web应用  动图在线制作网站有哪些,滑动动图图集怎么做？  javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】  android nfc常用标签读取总结  Laravel项目怎么部署到Linux_Laravel Nginx配置详解  Midjourney怎么调整光影效果_Midjourney光影调整方法【指南】  Windows Hello人脸识别突然无法使用  Laravel任务队列怎么用_Laravel Queues异步处理任务提升应用性能  Win11怎么开启自动HDR画质_Windows11显示设置HDR选项  Linux系统命令中screen命令详解  googleplay官方入口在哪里_Google Play官方商店快速入口指南  Laravel如何处理JSON字段_Eloquent原生JSON字段类型操作教程  WordPress 子目录安装中正确处理脚本路径的完整指南  Laravel如何实现邮箱地址验证功能_Laravel邮件验证流程与配置  Bootstrap整体框架之JavaScript插件架构  Laravel API资源类怎么用_Laravel API Resource数据转换  Android中AutoCompleteTextView自动提示  Win11怎么设置虚拟桌面 Win11新建多桌面切换操作【技巧】  Laravel如何为API生成Swagger或OpenAPI文档  如何在 React 中条件性地遍历数组并渲染元素  Laravel如何构建RESTful API_Laravel标准化API接口开发指南  奇安信“盘古石”团队突破 iOS 26.1 提权  美食网站链接制作教程视频,哪个教做美食的网站比较专业点？  CSS3怎么给轮播图加过渡动画_transition加transform实现【技巧】  什么是javascript作用域_全局和局部作用域有什么区别？  php做exe能调用系统命令吗_执行cmd指令实现方式【详解】  如何快速搭建个人网站并优化SEO？  大连企业网站制作公司,大连2025企业社保缴费网上缴费流程？