AngularJS表單基礎

實例

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

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