国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

tianhang / 955人閱讀

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

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

通過NgModel實(shí)現(xiàn)雙向綁定
當(dāng)開發(fā)一個(gè)數(shù)據(jù)錄入表單的時(shí)候，我們常常希望既可以顯示數(shù)據(jù)的屬性值，當(dāng)用戶更改時(shí)，又可以更新數(shù)據(jù)的屬性值。

NgModel指令可以幫我們實(shí)現(xiàn)這個(gè)需求：

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

這個(gè)結(jié)構(gòu)的背后還有一層含義，這層含義基于我們之前學(xué)到過的屬性綁定和事件綁定技術(shù)。我們可以通過分別綁定input元素的value屬性和input事件去實(shí)現(xiàn)和NgModel相同的效果：

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

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

還有一點(diǎn)需要注意：

在表單中需要注意的事項(xiàng)

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

如果未設(shè)置name或者ngModelOptions，就會(huì)報(bào)如下錯(cuò)誤：

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.

因?yàn)閚gForm持有通過ngModel指令和name屬性為各個(gè)元素創(chuàng)建的那些控件，并且監(jiān)視它們的屬性變化，包括有效性。 它還有自己的valid屬性，只有當(dāng)其中所有控件都有效時(shí)，它才有效。

2.使用button時(shí)需要注明type類型,未注明類型的button會(huì)默認(rèn)為submit，當(dāng)你點(diǎn)擊一個(gè)非提交表單按鈕時(shí)也會(huì)提交表單，所以要注明type=”button”

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/82860.html

相關(guān)文章

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

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

    imccl 評論0 收藏0

  • Angular 2.x 從 0 到 1 (二）史上最簡單的 Angular2 教程

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

    warkiz 評論0 收藏0

  • AngularJS 2 Quick Start

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

    Channe 評論0 收藏0

  • Angular 4 簡單入門筆記

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

    whlong 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<