Angular.js Form Example 表單練習

Angular.js Form Example 表單練習

Angular.js Form Example 表單練習

這個表單會展示常用表單元件、基本Directive和Controller的功能運作。由於網路上有很多大大的教學文章,因此在這裡只記錄一些我在學習/實作上遇到的重要觀念。

  • 單向資料綁定使用「ng-bind」、「ng-check」或「{{}}」(雙大括號),而雙向資料綁定則使用「ng-model」。
  • 當使用ng-model時,Angular.js會自動建立關係鏈(chain)中必要的物件和Key值來實體化資料綁定的連結。因此不需要在程式碼中宣告user變數,直到使用者在username、password欄位輸入內容,就會自動建立user物件。並且,取用表單中的username與password不需要再宣告額外的變數,因為對於表單的呈現是直接模塑(modeling)成為controller裡的物件。因此,在取用表單內容值時可避免處理任何額外的工作。 範例如下:

    • HTML Snippet

        <form ng-submit="ctrl.submit()">
          <input type="text" ng-model="ctrl.user.username">
          <input type="password" ng-model="ctrl.user.password">
          <input type="submit" value="Submit">
        </form>
      
    • JavaScript Snippet

      angular.module('notesApp', []).controller('MainCtrl', [function() {
          var self = this;
          self.submit = function() {
              console.log('User clicked submit with ', self.user);
          };
      }]);
      
  • 巢狀表單(Nested Form):<form>並不允許巢狀配置,為了解決這個問題,使用「<ng-form>」,範例可參考 - Day27- 入門AngularJS筆記-AngularJS指令(23): ng-form

  • 表單驗証與狀態:利用HTML5的validate tag和Angular.js的驗證器(validator),若表單欄位填寫資料不合法時,禁用submit button。
    • 表單狀態,整理如下:
      • $invalid:若表單中有任一欄位驗證為false,則$invalid為true。
      • $valid:若表單全部欄位驗證皆合法,則$valid為true。
      • $pristine:若使用者沒有修改過欄位,則$pristine為true。
      • $dirty:使用者修改過欄位(含復原),則$dirty為true。
      • $error: 報錯,見下面「錯誤訊息」範例。
    • Angular.js內建驗證器,整理如下:
      • required:欄位必填。
      • ng-required:有條件必填。
      • ng-minlength:最小長度。
      • ng-maxlength:最大長度。
      • ng-pattern:利用正規表示檢查欄位是否合法。
      • type="email":輸入字串必須符合Email規則,例如:必須有「@」。
      • type="number":只能為數字。
      • type="date":Angular.js在版本1.3.0以上支援瀏覽器在此欄位出現datepicker,若不支援則為純文字字串。它綁定ng-model為一個date物件,格式為yyyy-mm-dd,例如:2014-01-01。
      • type="url" :輸入字串必須符合網址規則,例如:必須有「http://」。
  • 錯誤訊息:當欄位不合法時,顯示錯誤訊息。範例如下:當欄位沒有填寫時,會出現錯誤訊息告知此欄位必填。

    Angular.js Form Example 表單練習 - 錯誤訊息

    • HTML Snippet

      <input type="text" ng-model="ctrl.user.username" required>
      <div class="errorMsg" ng-show="profileForm.username.$error.required">This is a required field.</div>
      
  • 表單、欄位狀態與CSS類別的對照,整裡如下:

    • 表單狀態與CSS類別的對照
      • $invalid:ng-invalid。
      • $valid:ng-valid。
      • $pristine:ng-pristine。
      • $dirty:ng-dirty。
    • 欄位狀態與CSS類別的對照

      • $invalid:ng-invalid。
      • $valid:ng-valid。
      • $pristine:ng-pristine。
      • $dirty:ng-dirty。
      • required:ng-valid-required or ng-invalid-required。
      • min:ng-valid-min or ng-invalid-min。
      • max:ng-valid-max or ng-invalid-max。
      • minlength:ng-valid-minlength or ng-invalid-minlength。
      • maxlength:ng-valid-maxlength or ng-invalid-maxlength。
      • pattern:ng-valid-pattern or ng-invalid-pattern。
      • url:ng-valid-url or ng-invalid-url。
      • email:ng-valid-email or ng-invalid-email。
      • date:ng-valid-date or ng-invalid-date。
      • number:ng-valid-number or ng-invalid-number。

      在這裡就可以用這些對照後的class裝飾表單報錯。

      input.ng-dirty.ng-invalid{
          background-color: red;
      }
      input.ng-dirty.ng-invalid-minlength{
          background-color: orange;
      }
      input.ng-dirty.ng-valid{
          background-color: white;
      }
      

      若使用者變更欄位內容且不合法,則欄位背景顏色變成紅色。

      Angular.js Form Example 表單練習 - 若使用者變更欄位內容且不合法,則欄位背景顏色變成紅色。

      若欄位內容少於最小長度,則背景顏色變成橘色。

      Angular.js Form Example 表單練習 - 若欄位內容少於最小長度,則背景顏色變成橘色

      若欄位內容合法,則欄位背景顏色是白色。

Demo

Angular.js Form Example 表單練習


參考資料


由於部落格搬家了,因此在新落格也放了一份,未來若有增刪會在這裡更新-Angular.js Form Example 表單練習
張貼留言