AngularJS表單基礎(chǔ)

實(shí)例

HTML代碼:


JS代碼:

運(yùn)行效果:

核心要點(diǎn)解析

第一點(diǎn)

注意:這里的form已經(jīng)不是原生的HTML表單,而是Angular自己的指令了!

由于我們這個(gè)例子里面的標(biāo)簽處于ng-app內(nèi)部,所以它已經(jīng)被Angular封裝過(guò),是一個(gè)Angular指令。

參見(jiàn)官方文檔:http://docs.angularjs.org/api/ng.directive:form

經(jīng)過(guò)Angular封裝之后的form具有哪些特性呢?

首先,HTML原生的form表單是不能嵌套的,而Angular封裝之后的form就可以嵌套。

其次,Angular為form擴(kuò)展了自動(dòng)校驗(yàn)、防止重復(fù)提交等功能。

有人說(shuō),如果我想要使用原生的HTML表單,應(yīng)該怎么做呢?

Angular提供了一個(gè)ng-pristine指令,把這個(gè)指令寫(xiě)在form標(biāo)簽中,Angular就知道你想使用原生的form標(biāo)簽了。

第二點(diǎn)

Angular對(duì)input元素的type進(jìn)行了擴(kuò)展,一共提供了以下10種類(lèi)型:


根據(jù)W3C標(biāo)準(zhǔn)的描述,原生HTML里面的input標(biāo)簽有以下10種類(lèi)型:


可以看到,Angular擴(kuò)展了number/url/email/rest這4種input類(lèi)型,當(dāng)然原生的類(lèi)型還是可以用的,因此導(dǎo)入了Angular框架之后,我們一共可以使用14種input類(lèi)型。

PS:Angular擴(kuò)展的這4種類(lèi)型在HTML5規(guī)范里面已經(jīng)全部包含(HTML5規(guī)范一共提供了20種input類(lèi)型),詳細(xì)文檔參見(jiàn)這里:http://www.w3school.com.cn/html5/tag_input.asp

第三點(diǎn)

Angular為表單內(nèi)置了4中CSS樣式。

ng-valid 校驗(yàn)合法狀態(tài)

ng-invalid 校驗(yàn)非法狀態(tài)

ng-pristine 如果要使用原生的form,需要設(shè)置這個(gè)值

ng-dirty? ? 表單處于臟數(shù)據(jù)狀態(tài)

第四點(diǎn)

Angular在對(duì)表單進(jìn)行自動(dòng)校驗(yàn)的時(shí)候會(huì)校驗(yàn)Model上的屬性,如果不設(shè)置ng-model,則Angular無(wú)法知道m(xù)yForm.$invalid這個(gè)值是否為真。

我們可以把以上例子里面的代碼改成這樣:


也就是把ng-model="user.password"這個(gè)屬性去掉了,required配置項(xiàng)還保留在這里,然后你會(huì)發(fā)現(xiàn),即使你不輸入密 碼,保存按鈕也是可以用的。因?yàn)榇藭r(shí)myForm.$invalid為false,也就是說(shuō)如果input不綁定數(shù)據(jù)模型,校驗(yàn)機(jī)制就無(wú)法校驗(yàn)這個(gè)輸入 項(xiàng)。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀(guān)點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 版本:Angular 5.0.0-alpha 表單是商業(yè)應(yīng)用的支柱,我們用它來(lái)執(zhí)行登錄、求助、下單、預(yù)訂機(jī)票、安排...
    soojade閱讀 1,296評(píng)論 0 1
  • AngularJSAngularJS 是一個(gè) MV* 框架, 最適于開(kāi)發(fā)客戶(hù)端的單頁(yè)面應(yīng)用。它不是個(gè)功能庫(kù),...
    一直以來(lái)都很好閱讀 913評(píng)論 0 0
  • ng-model 指令ng-model 指令 綁定 HTML 元素 到應(yīng)用程序數(shù)據(jù)。ng-model 指令也可以:...
    壬萬(wàn)er閱讀 896評(píng)論 0 2
  • 記得最開(kāi)始學(xué)習(xí)ionic混合開(kāi)發(fā)的時(shí)候, 朋友們都推薦我先學(xué)學(xué)angular.js, 然后再看ionic框架的東西...
    火之玉閱讀 625評(píng)論 0 1
  • “唔……”她皺眉輕輕睜眼, 微微動(dòng)了動(dòng)身子,還是有些痛,她茫然地看著屋子,這才突然想起來(lái)他?!澳阈蚜?”門(mén)口腳步聲...
    lo木木ve閱讀 470評(píng)論 0 0