真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

<strike id="eg4am"></strike>

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營(yíng)銷
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營(yíng)銷
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們

 
Angular表單
 
  
    
  

假如有以上簡(jiǎn)單表單，先不論優(yōu)劣，有哪些方式可以獲取到表單數(shù)據(jù)呢？ 先看兩種簡(jiǎn)單粗暴的

1）事件$event的方式

在監(jiān)聽事件的時(shí)候，將整個(gè)事件載荷 $event 傳遞到事件處理函數(shù)，它會(huì)攜帶觸發(fā)元素的各種信息。這里監(jiān)聽form元素的submit事件，將整個(gè)form的信息傳給處理函數(shù)，并打印出來(lái)

testInput ( _input: any) {
  console.dir(_input);
}

觸發(fā)submit后，查看結(jié)果。非常眼熟，就是傳統(tǒng)方式中的event嘛，后面就不用多說了，target即為form元素，再定位到input子元素，分別獲取value即可。

為了獲取input的Value，我們傳遞了非常多的無(wú)用信息，處理函數(shù)根本就不關(guān)心元素的位置，屬性等等，它只需要value值。所以這種方式不可取

2) 模版引用變量

Angular中可以用 模版引用變量(#var)來(lái)引用DOM元素/Angular組件/指令。通常模版引用變量就是代表聲明的那個(gè)元素，當(dāng)然也可以修改指向，可以代表Angular指令(比如后續(xù)用到的ngForm指令和ngModel指令)。

// 模版引用變量代表Form元素


// 模版引用變量代表ngForm指令

從下圖可以看到不同，第一個(gè)和$event.target一樣，是DOM元素；第二個(gè)是ngForm指令，可以跟蹤每個(gè)控件的值和狀態(tài)(是否輸入過？是否校驗(yàn)通過？等等)，后續(xù)會(huì)詳細(xì)說

所以當(dāng)我們直接用模版引用變量引用input元素時(shí)，就可以直接在模版中傳遞input元素的value，而不需要傳遞整個(gè)元素信息。這種方式也不好，必須要通過事件觸發(fā)才可以傳遞

注意：模版引用變量的作用域是整個(gè)模版，所以在同一個(gè)模版中，不能有同名的模版引用變量

這兩種獲取表單數(shù)據(jù)的方式只是了解下，因?yàn)锳ngular提供了兩種更好的構(gòu)建表單的方式---模版驅(qū)動(dòng)表單和模型驅(qū)動(dòng)表單

模版驅(qū)動(dòng)表單

顧名思義，是使用 HTML模版 + 表單專業(yè)指令 來(lái)構(gòu)建表單。使用模版驅(qū)動(dòng)表單，記得要先在應(yīng)用模塊中import FormsModule。說明以下幾點(diǎn)：

1、模版驅(qū)動(dòng)表單使用 [(ngModel)] 語(yǔ)法進(jìn)行雙向數(shù)據(jù)綁定，非常簡(jiǎn)單就可以把表單數(shù)據(jù)綁定到模型中。注意在表單中使用[ngModel]時(shí)，必須要定義name屬性，因?yàn)锳ngular在處理表單時(shí)，會(huì)創(chuàng)建一些FormControl，用來(lái)跟蹤單個(gè)表單控件的值和狀態(tài)，而表單控件name屬性就是鍵值，所以必須要指定name屬性。(這應(yīng)該算是指出了獲取表單數(shù)據(jù)的兩種科學(xué)的方式：[ngModel]語(yǔ)法綁定 和 通過formControl的Api獲取)

2、使用 ngForm指令，來(lái)監(jiān)聽整個(gè)表單的有效性(valid屬性)。Angular會(huì)自動(dòng)為form表單自動(dòng)創(chuàng)建并添加ngForm指令，直接使用即可

3、使用ngModel指令，來(lái)監(jiān)聽單個(gè)表單控件的狀態(tài)，還會(huì)使用特定的Angular css來(lái)更新控件樣式 ，我們可以通過這些class來(lái)控制不同狀態(tài)時(shí)，表單控件的展示　

4、表單驗(yàn)證可以使用 HTML原生的表單驗(yàn)證屬性(required , pattern , max , min 等等) ，驗(yàn)證出錯(cuò)時(shí)，3中提到的errors屬性就會(huì)有對(duì)應(yīng)的錯(cuò)誤項(xiàng)；

還可以自定義驗(yàn)證器，因?yàn)槟０骝?qū)動(dòng)表單不直接訪問FormControl實(shí)例，所以需要把自定義的驗(yàn)證器用指令包裝。

通過以下栗子來(lái)展示模版驅(qū)動(dòng)表單簡(jiǎn)單使用

 
  
    
    
    
    
  
    
  
    用戶名不能為空！
    用戶名只能包含英文或數(shù)字！
  
  
   
  
  
   密碼不能為空！
  
  
   
   登錄
  
 

通過Angular css 自動(dòng)添加的class來(lái)控制表單樣式

input.ng-invalid.ng-touched{
    border: 2px solid red;
 }

查看下效果，表單校驗(yàn)、樣式反饋、按鈕狀態(tài)管理、數(shù)據(jù)獲取都很方便。

關(guān)于如何使用Angular模版驅(qū)動(dòng)表單就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。