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