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中添加一个有默认值的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。
[(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层的联动,尽管这种方式可能并不好,但是在某些情况下也不失为一种简便的方案。
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |