通過NgModel實現(xiàn)雙向綁定
當(dāng)開發(fā)一個數(shù)據(jù)錄入表單的時候樊零，我們常常希望既可以顯示數(shù)據(jù)的屬性值酣难，當(dāng)用戶更改時睹酌，又可以更新數(shù)據(jù)的屬性值。
- NgModel指令可以幫我們實現(xiàn)這個需求：
<input [(ngModel)]="currentHero.firstName">
- 如果我們更喜歡加前綴的格式的話拍鲤，也可以這樣寫：
<input bindon-ngModel="currentHero.firstName">
- 這個結(jié)構(gòu)的背后還有一層含義贴谎，這層含義基于我們之前學(xué)到過的屬性綁定和事件綁定技術(shù)。我們可以通過分別綁定input元素的value屬性和input事件去實現(xiàn)和NgModel相同的效果：
<input [value]="currentHero.firstName" (input)="currentHero.firstName=$event.target.value">
- 這種寫法是非常繁瑣的季稳，我們不僅需要記住需要設(shè)置的元素屬性擅这，還要記住反映用戶操作的事件。以及怎么提取當(dāng)前輸入框中的文本值景鼠，以便去更新數(shù)據(jù)屬性仲翎。有人愿意每次都去做這些工作嗎？NgModel指令隱藏了這些繁瑣細(xì)節(jié)铛漓，它包裝了元素的value屬性溯香，監(jiān)聽了input事件，并且在文本框發(fā)生改變時浓恶，觸發(fā)該事件玫坛。
<input [ngModel]="currentHero.firstName" (ngModelChange)="currentHero.firstName=$event">
- [(ngModel)]是否滿足了我們所有的需求了呢? 是否存在這樣的需求，需要我們使用它的擴展寫法呢包晰？NgModel僅僅可以設(shè)置目標(biāo)屬性湿镀。如果當(dāng)用戶改變輸入值炕吸，我們需要做一起不同的事情，或者更多地事情呢勉痴？ 讓我們嘗試實現(xiàn)這樣一個需求赫模，將用戶的輸入強制轉(zhuǎn)換成大寫字母:
<input [ngModel]="currentHero.firstName" (ngModelChange)="setUpperCaseFirstName($event)">
可以看到，使用ngModel的擴展寫法蒸矛，可以實現(xiàn)更多地需求瀑罗。
