實例

HTML代碼：

JS代碼：

運行效果：

核心要點解析

第一點

注意：這里的form已經不是原生的HTML表單，而是Angular自己的指令了！

由于我們這個例子里面的標簽處于ng-app內部，所以它已經被Angular封裝過，是一個Angular指令。

參見官方文檔：http://docs.angularjs.org/api/ng.directive:form

經過Angular封裝之后的form具有哪些特性呢？

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

其次，Angular為form擴展了自動校驗、防止重復提交等功能。

有人說，如果我想要使用原生的HTML表單，應該怎么做呢？

Angular提供了一個ng-pristine指令，把這個指令寫在form標簽中，Angular就知道你想使用原生的form標簽了。

第二點

Angular對input元素的type進行了擴展，一共提供了以下10種類型：

根據W3C標準的描述，原生HTML里面的input標簽有以下10種類型：

可以看到，Angular擴展了number/url/email/rest這4種input類型，當然原生的類型還是可以用的，因此導入了Angular框架之后，我們一共可以使用14種input類型。

PS：Angular擴展的這4種類型在HTML5規范里面已經全部包含（HTML5規范一共提供了20種input類型），詳細文檔參見這里：http://www.w3school.com.cn/html5/tag_input.asp

第三點

Angular為表單內置了4中CSS樣式。

ng-valid 校驗合法狀態

ng-invalid 校驗非法狀態

ng-pristine 如果要使用原生的form，需要設置這個值

ng-dirty? ? 表單處于臟數據狀態

第四點

Angular在對表單進行自動校驗的時候會校驗Model上的屬性，如果不設置ng-model，則Angular無法知道myForm.$invalid這個值是否為真。

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

也就是把ng-model="user.password"這個屬性去掉了，required配置項還保留在這里，然后你會發現，即使你不輸入密 碼，保存按鈕也是可以用的。因為此時myForm.$invalid為false，也就是說如果input不綁定數據模型，校驗機制就無法校驗這個輸入 項。