“對呀對呀！……回字有四樣寫法，你知道么？”，當(dāng)時(shí)魯大大如此諷刺孔乙己，意味著老孔這個(gè)被科舉制毒害的人注意此種無用之物實(shí)在可悲。但是在Angular 2的世界中，很少存在無用之物，ngModel有三種寫法，你知道嗎？

表單的設(shè)計(jì)永遠(yuǎn)都是應(yīng)用的重頭戲，而其中最基本的功能點(diǎn)即是通過一個(gè)個(gè)輸入組件實(shí)現(xiàn)的，為此Angular 2為我們提供了鋒利的武器：ngModel。而其不同的使用方式有著大不相同的作用：

ngModel

如果單獨(dú)使用ngModel，且沒有為其賦值的話，它會(huì)在其所在的ngForm.value對象上添加一個(gè)property，此property的key值為ngModel所在組件設(shè)置的name屬性的值：

<form novalidate #f="ngForm">
 <input type='text' name='userName' placeholder='Input your userName' ngModel>
</form>
<p>
 {{ f.value | json }} // { "userName": "" }
</p>

此時(shí)需要注意的是，單獨(dú)使用ngModel時(shí)，如果沒有為ngModel賦值的話，則必須存在name屬性。

也就是說，單獨(dú)ngModel的作用是通知ngForm.value，我要向你那里加入一個(gè)property，其key值是組件的name屬性值，其value為空字符串。

[ngModel]

可是，如果想向ngForm中添加一個(gè)有默認(rèn)值的property需要怎么做呢？這時(shí)就需要使用單向數(shù)據(jù)綁定的格式了，也就是[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" }，不會(huì)隨著f.value的變化而變化
</p>

這里我們使用了單向數(shù)據(jù)綁定的特點(diǎn)，可以為ngForm.value添加一個(gè)帶有初始值的property。

注意單向數(shù)據(jù)綁定的特點(diǎn)，此時(shí)在表單輸入框中做的任何改變都不會(huì)影響model中的數(shù)據(jù)，也就是說this.model.userName不會(huì)隨著輸入框的改變而改變。不過輸入框改變會(huì)體現(xiàn)在f.value中。

[(ngModel)]

上述的單向數(shù)據(jù)綁定在單純地提供初始值很有用，不過總是有些場景需要將用戶輸入體現(xiàn)在我們的model上，此時(shí)就需要雙向數(shù)據(jù)綁定了，也即[(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" }，會(huì)隨著f.value的變化而變化
</p>

這里我們不僅為ngForm.value添加了一個(gè)帶有初始值的property，還能實(shí)現(xiàn)Model和View層的聯(lián)動(dòng)，盡管這種方式可能并不好，但是在某些情況下也不失為一種簡便的方案。

關(guān)于[(ngModel)]的內(nèi)部邏輯可查看Angular 2 父子組件數(shù)據(jù)通信。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論