Angular.js Form Example 表單練習

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

<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>
angular.module('notesApp', []).controller('MainCtrl', [
  function() {
    var self = this;
    self.submit = function() {
      console.log('User clicked submit with ', self.user);
    };
  },
]);

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

<input type="text" ng-model="ctrl.user.username" required />
<div class="errorMsg" ng-show="profileForm.username.$error.required">This is a required field.</div>

Demo

Angular.js Form Example 表單練習

參考資料


這篇文章的原始位置在這裡-Angular.js Form Example 表單練習

由於部落格搬遷至此,因此在這裡放了一份,以便閱讀;部份文章片段也做了些許修改,以期提供更好的內容。

AngularJS