實例
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不綁定數據模型,校驗機制就無法校驗這個輸入 項。