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

imccl 發布于2019-08-29 12:32 / 1964人閱讀

摘要：入門系列四和表單元素屬性通過實現雙向綁定當開發一個數據錄入表單的時候，我們常常希望既可以顯示數據的屬性值，當用戶更改時，又可以更新數據的屬性值。以及怎么提取當前輸入框中的文本值，以便去更新數據屬性。

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

通過NgModel實現雙向綁定
當開發一個數據錄入表單的時候，我們常常希望既可以顯示數據的屬性值，當用戶更改時，又可以更新數據的屬性值。

NgModel指令可以幫我們實現這個需求：

如果我們更喜歡加前綴的格式的話，也可以這樣寫：

這個結構的背后還有一層含義，這層含義基于我們之前學到過的屬性綁定和事件綁定技術。我們可以通過分別綁定input元素的value屬性和input事件去實現和NgModel相同的效果：

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

[(ngModel)]是否滿足了我們所有的需求了呢? 是否存在這樣的需求，需要我們使用它的擴展寫法呢？NgModel僅僅可以設置目標屬性。如果當用戶改變輸入值，我們需要做一起不同的事情，或者更多地事情呢？讓我們嘗試實現這樣一個需求，將用戶的輸入強制轉換成大寫字母:

還有一點需要注意：

在表單中需要注意的事項

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

如果未設置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”

云服務器 GPU云服務器 js name 元素入門系列課程深度學習入門系列課程 spark入門實戰系列

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111971.html

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

摘要：入門系列四和表單元素屬性通過實現雙向綁定當開發一個數據錄入表單的時候，我們常常希望既可以顯示數據的屬性值，當用戶更改時，又可以更新數據的屬性值。以及怎么提取當前輸入框中的文本值，以便去更新數據屬性。 Angular2入門系列（四）————ngModel和表單元素name屬性通過NgModel實現雙向綁定當開發一個數據錄入表單的時候，我們常常希望既可以顯示數據的屬性值，當用戶更改時，又...

tianhang 2019-08-20 16:19 評論0 收藏0
Angular 2.x 從 0 到 1 (二）史上最簡單的 Angular2 教程

摘要：下面我們看看如果使用是什么樣子的，首先我們需要在組件的修飾器中配置，然后在組件的構造函數中使用參數進行依賴注入。第一節：Angular 2.0 從0到1 （一）第二節：Angular 2.0 從0到1 （二）第三節：Angular 2.0 從0到1 （三）第二節：用Form表單做一個登錄控件對于login組件的小改造在 hello-angularsrcapploginlogin...

warkiz 2019-08-20 13:58 評論0 收藏0
AngularJS 2 Quick Start

摘要：引言是用于構建基于瀏覽器的復雜應用的下一代框架。它涵蓋了的一些基本概念，包括組件模型服務管道傳入傳出以及事件播散等使用方法，并介紹了項目的基本組織結構等。用于雙向綁定，使用來定義，專門用于定義雙向綁定。引言 Angular2 是 Google 用于構建基于瀏覽器的復雜應用的下一代 MV* 框架。該項目是我學習 Angular2 的入門項目，我覺得它很友好地表達了 Angular2 的...

Channe 2019-08-19 17:43 評論0 收藏0
Angular 4 簡單入門筆記

摘要：首先，我們需要在入口頁面的中配置根路徑然后創建一個路由模塊路由配置在主模塊中導入配置好的路由模塊而在頁面中需要一個容器去承載上面代碼中的定義了用戶點擊后的路由跳轉，定義該路由激活時的樣式類。剛實習的時候用過AngularJS，那時候真的是連原生JavaScript都不會寫，依樣畫葫蘆做了幾個管理后臺。然后突然換項目了，AngularJS就不寫了，感覺前前后后接觸了一年多的Angula...

whlong 2019-08-20 17:44 評論0 收藏0