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

左手的ㄟ右手 2022-05-17 04:04 202阅读 0赞

原文出处：[https://www.jb51.net/article/117465.htm][https_www.jb51.net_article_117465.htm]  
本篇文章主要介绍了Angular 2 ngForm中的ngModel、\[ngModel\]和\[(ngModel)\]的区别，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

“对呀对呀！……回字有四样写法，你知道么？”，当时鲁大大如此讽刺孔乙己，意味着老孔这个被科举制毒害的人注意此种无用之物实在可悲。但是在Angular 2的世界中，很少存在无用之物，ngModel有三种写法，你知道吗？

表单的设计永远都是应用的重头戏，而其中最基本的功能点即是通过一个个输入组件实现的，为此Angular 2为我们提供了锋利的武器：ngModel。而其不同的使用方式有着大不相同的作用：

**ngModel**

如果单独使用ngModel，且没有为其赋值的话，它会在其所在的ngForm.value对象上添加一个property，此property的key值为ngModel所在组件设置的name属性的值：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 </td> 
 <td> <code>&lt;form novalidate</code> <code>#f="ngForm"&gt;</code> <code>&nbsp;</code><code>&lt;input type=</code><code>'text'</code> <code>name=</code><code>'userName'</code> <code>placeholder=</code><code>'Input your userName'</code> <code>ngModel&gt;</code> <code>&lt;/form&gt;</code> <code>&lt;p&gt;</code> <code>&nbsp;</code><code>{ { f.value | json }} </code><code>// { "userName": "" }</code> <code>&lt;/p&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

此时需要注意的是，单独使用ngModel时，如果没有为ngModel赋值的话，则必须存在name属性。

也就是说，单独ngModel的作用是通知ngForm.value，我要向你那里加入一个property，其key值是组件的name属性值，其value为空字符串。

**\[ngModel\]**

可是，如果想向ngForm中添加一个有默认值的property需要怎么做呢？这时就需要使用单向数据绑定的格式了，也就是\[ngModel\]：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 </td> 
 <td> <code>this</code><code>.model = { </code> <code>&nbsp;</code><code>userName: </code><code>'Casear'</code> <code>};</code> &nbsp; <code>&lt;form novalidate</code> <code>#f="ngForm"&gt;</code> <code>&nbsp;</code><code>&lt;input type=</code><code>'text'</code> <code>name=</code><code>'userName'</code> <code>placeholder=</code><code>'Input your userName'</code> <code>[ngModel]=</code><code>'model.userName'</code><code>&gt;</code> <code>&lt;/form&gt;</code> <code>&lt;p&gt;</code> <code>&nbsp;</code><code>{ { f.value | json }} </code><code>// { "userName": "Casear" }</code> <code>&nbsp;</code><code>{ { model | json }}&nbsp; </code><code>// { "userName": "Casear" }，不会随着f.value的变化而变化</code> <code>&lt;/p&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

这里我们使用了单向数据绑定的特点，可以为ngForm.value添加一个带有初始值的property。

注意单向数据绑定的特点，此时在表单输入框中做的任何改变都不会影响model中的数据，也就是说this.model.userName不会随着输入框的改变而改变。不过输入框改变会体现在f.value中。

**\[(ngModel)\]**

上述的单向数据绑定在单纯地提供初始值很有用，不过总是有些场景需要将用户输入体现在我们的model上，此时就需要双向数据绑定了，也即\[(ngModel)\]：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 </td> 
 <td> <code>this</code><code>.model = { </code> <code>&nbsp;</code><code>userName: </code><code>'Casear'</code> <code>};</code> &nbsp; <code>&lt;form novalidate</code> <code>#f="ngForm"&gt;</code> <code>&nbsp;</code><code>&lt;input type=</code><code>'text'</code> <code>name=</code><code>'userName'</code> <code>placeholder=</code><code>'Input your userName'</code> <code>[(ngModel)]=</code><code>'model.userName'</code><code>&gt;</code> <code>&lt;/form&gt;</code> <code>&lt;p&gt;</code> <code>&nbsp;</code><code>{ { f.value | json }} </code><code>// { "userName": "Casear" }</code> <code>&nbsp;</code><code>{ { model | json }}&nbsp; </code><code>// { "userName": "Casear" }，会随着f.value的变化而变化</code> <code>&lt;/p&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

这里我们不仅为ngForm.value添加了一个带有初始值的property，还能实现Model和View层的联动，尽管这种方式可能并不好，但是在某些情况下也不失为一种简便的方案。

关于\[(ngModel)\]的内部逻辑可查看[Angular 2 父子组件数据通信][Angular 2]。

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

[https_www.jb51.net_article_117465.htm]: https://www.jb51.net/article/117465.htm
[Angular 2]: https://www.jb51.net/article/116897.htm