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

weixin_34127717發表於2017-05-05
Angular

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”

相關文章