iT邦幫忙

DAY 26
7

入門AngularJS筆記與前端領域的學習筆記分享系列 第 26

Day26- 入門AngularJS筆記-AngularJS: angularJS與form的應用

為什麼要與form搭配使用?

透過angular與form的應用,可以快速處理表單可能會遇到的問題。

小結重點如下:

我們可以在表單上綁定資料,獲取資料內容。
簡單驗證表單,例如 email 或是否為空值
顯示發生錯誤的提示
當表單發生錯誤時,無法送出按鈕。

本次改寫範例:
http://jsbin.com/IlIvAXI/4/

明日筆記:

那和ng-form有什麼不同?
下一篇介紹ng-form指令的使用

angularJS與form如何運用?

  1. 建立一個form表單,並使用ng-submit指令,觸發save這個方法。

  2. 在controller裡,建立save() 這個方法,可以用來存入表單的內容。

    $scope.save = function() {
    $log.log($scope.desinger.email);
    };

  3. 在from裡面,放入各項輸入欄位。其中required代表必填。

type="email" 是html5的輸入表單類型,用來驗證表單格式為email。

<input ng-model="desinger.email" name="desingerEmail" type="email" placeholder="xxx@xxx.xxx"/>
  1. 透過angular來驗證欄位內容。

    有錯
    此欄位必填
    email格式錯誤

myForm.desingerEmail.$valid 會透過表單欄位的描述去驗證是否錯誤,
例如下方語法出現type="email",required這兩個屬性,myForm.desingerEmail.$valid 就會去偵測欄位的輸入內容必須為emal格式且不得為空值。

<input ng-model="desinger.email" name="desingerEmail" type="email" required/>

myForm.desingerEmail.$error.required和myform.desingerEmail.$error.email也是angularJS用來驗證輸入是否錯誤的指令(回傳boolean)。

  1. 當欄位有錯誤,讓按鈕失效,無法點選

完整範例:
http://jsbin.com/IlIvAXI/4/edit

官方文件:
http://docs.angularjs.org/api/ng.directive:form

本次範例改寫來源:
http://www.angularjs.cn/A08j

---------------入門AngularJS筆記---------------

Day30- 入門AngularJS筆記-directive
http://ithelp.ithome.com.tw/question/10140689

Day29- 入門AngularJS筆記-filter
http://ithelp.ithome.com.tw/question/10140497

Day28- 入門AngularJS筆記-AngularJS指令(24): ng-mouseover
http://ithelp.ithome.com.tw/question/10140351

Day27- 入門AngularJS筆記-AngularJS指令(23): ng-form
http://ithelp.ithome.com.tw/question/10140193

Day26- 入門AngularJS筆記-AngularJS: angularJS與form的應用
http://ithelp.ithome.com.tw/question/10140147

Day25- 入門AngularJS筆記-AngularJS指令(22) ng-style
http://ithelp.ithome.com.tw/question/10140067

Day24- 入門AngularJS筆記-AngularJS指令(21) $watch
http://ithelp.ithome.com.tw/question/10139851

Day23- 入門AngularJS筆記-AngularJS指令(20) ng-blur與ng-focus
http://ithelp.ithome.com.tw/question/10139721

Day22- 入門AngularJS筆記-AngularJS指令(19) ng-class
http://ithelp.ithome.com.tw/question/10139571

Day21- 入門AngularJS筆記-AngularJS指令(18) ng-bind-html
http://ithelp.ithome.com.tw/question/10139381

Day20- 入門AngularJS筆記-AngularJS指令(17) ng-bind-template
http://ithelp.ithome.com.tw/question/10139077

Day19- 入門AngularJS筆記-AngularJS指令(16) ng-cloak
http://ithelp.ithome.com.tw/question/10139014

Day18- 入門AngularJS筆記-AngularJS指令(15) ng-bind
http://ithelp.ithome.com.tw/question/10138821

Day17- 入門AngularJS筆記-AngularJS的timeout應用
http://ithelp.ithome.com.tw/question/10138627

Day16- 入門AngularJS筆記-AngularJS指令(14): ng-checked
http://ithelp.ithome.com.tw/question/10138409

Day15- 入門AngularJS筆記-AngularJS的MVC應用筆記
http://ithelp.ithome.com.tw/question/10137781

Day14- 入門AngularJS筆記-AngularJS指令(13): ng-href
http://ithelp.ithome.com.tw/question/10137625

Day13- 入門AngularJS筆記-AngularJS指令(12): ng-src
http://ithelp.ithome.com.tw/question/10137296

Day12- 入門AngularJS筆記-AngularJS指令(11): ng-include
http://ithelp.ithome.com.tw/question/10136841

Day11- 入門AngularJS筆記-AngularJS指令(10): ng-change
http://ithelp.ithome.com.tw/question/10136545

Day10- 入門AngularJS筆記-AngularJS指令(9): ng-switch
http://ithelp.ithome.com.tw/question/10136011

Day9- 入門AngularJS筆記-AngularJS指令(8): select的ng-options
http://ithelp.ithome.com.tw/question/10135776

Day8- 入門AngularJS筆記-AngularJS指令(7): input
http://ithelp.ithome.com.tw/question/10135378

Day7- 入門AngularJS筆記-AngularJS指令(6): ng-repeat
http://ithelp.ithome.com.tw/question/10134889

Day6- 入門AngularJS筆記-AngularJS指令(5): ng-init
http://ithelp.ithome.com.tw/question/10134415

Day5- 入門AngularJS筆記-AngularJS指令(4): ng-show
http://ithelp.ithome.com.tw/question/10133625

Day4- 入門AngularJS筆記-AngularJS指令(3): ng-click
http://ithelp.ithome.com.tw/question/10133576

Day3- 入門AngularJS筆記-AngularJS指令(2): ng-controller
http://ithelp.ithome.com.tw/question/10133017

Day2- 入門AngularJS筆記-AngularJS指令(1): ng-model
http://ithelp.ithome.com.tw/question/10132601

Day1- 入門AngularJS筆記與前端領域的學習筆記分享介紹
http://ithelp.ithome.com.tw/question/10132196


上一篇
Day25- 入門AngularJS筆記-AngularJS指令(22) ng-style
下一篇
Day27- 入門AngularJS筆記-AngularJS指令(23): ng-form
系列文
入門AngularJS筆記與前端領域的學習筆記分享30

1 則留言

我要留言

立即登入留言