實(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)。