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 父子组件数据通信。

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

# 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遇到的问题 # 绑定 # 输入框 # 你知道 # 表单 # 之物 # 对呀 # 的人 # 的是 # 也就是说 # 我要 # 还能 # 会在 # 数据通信 # 如果没有 # 仅为 # 为其 # 怎么做 # 时就 # 向你 # 即是

返回目录在线咨询

上一篇：精准网页设计报价指南，透明化您的网站建设成本
下一篇：PHP 4 函数中引用参数的默认值限制与解决方案

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法

您的项目需求