Angular2入門系列（四）————ngModel和表單元素name屬性

Angular2入門系列（四）————ngModel和表單元素name屬性

經過NgModel實現雙向綁定
當開發一個數據錄入表單的時候，咱們經常但願既能夠顯示數據的屬性值，當用戶更改時，又能夠更新數據的屬性值。

1. NgModel指令能夠幫咱們實現這個需求：

   <input [(ngModel)]="currentHero.firstName">

2. 若是咱們更喜歡加前綴的格式的話，也能夠這樣寫：

   <input bindon-ngModel="currentHero.firstName">

3. 這個結構的背後還有一層含義，這層含義基於咱們以前學到過的屬性綁定和事件綁定技術。咱們能夠經過分別綁定input元素的value屬性和input事件去實現和NgModel相同的效果：

   <input [value]="currentHero.firstName" (input)="currentHero.firstName=$event.target.value">

4. 這種寫法是很是繁瑣的，咱們不只須要記住須要設置的元素屬性，還要記住反映用戶操做的事件。以及怎麼提取當前輸入框中的文本值，以便去更新數據屬性。有人願意每次都去作這些工做嗎？NgModel指令隱藏了這些繁瑣細節，它包裝了元素的value屬性，監聽了input事件，而且在文本框發生改變時，觸發該事件。

   <input [ngModel]="currentHero.firstName" (ngModelChange)="currentHero.firstName=$event">

5. [(ngModel)]是否知足了咱們全部的需求了呢? 是否存在這樣的需求，須要咱們使用它的擴展寫法呢？NgModel僅僅能夠設置目標屬性。若是當用戶改變輸入值，咱們須要作一塊兒不一樣的事情，或者更多地事情呢？ 讓咱們嘗試實現這樣一個需求，將用戶的輸入強制轉換成大寫字母:

   <input [ngModel]="currentHero.firstName" (ngModelChange)="setUpperCaseFirstName($event)">

   還有一點須要注意：

在表單中須要注意的事項

1.在ng2表單中使用ngModel須要注意,必須帶有name屬性或者使用 [ngModelOptions]=」{standalone: true}」，二選其一

<form #testform="ngform">
    <input name="username" [(ngModel)]=user.name />
</form> 

<form #testform="ngform">
    <input [ngModelOptions]="{standalone: true}" [(ngModel)]=user.name />
</form>

若是未設置name或者ngModelOptions，就會報以下錯誤：

If ngModel is used within a form tag, either the name attribute must be set or the formcontrol must be defined as ‘standalone’ in ngModelOptions.

由於ngForm持有經過ngModel指令和name屬性爲各個元素建立的那些控件，而且監視它們的屬性變化，包括有效性。 它還有本身的valid屬性，只有當其中全部控件都有效時，它纔有效。

2.使用button時須要註明type類型,未註明類型的button會默認爲submit，當你點擊一個非提交表單按鈕時也會提交表單，因此要註明type=」button」