AngularJS使用指令增強標準表單元素功能

更新時間：2016年07月01日 15:45:08 作者：super_yang_android

這篇文章主要介紹了AngularJS使用指令增強標準表單元素功能，包括數(shù)據(jù)綁定、建立模型屬性、驗證表單等，感興趣的小伙伴們可以參考一下

Angular 可使用指令無縫地增強標準表單元素的功能，我們將討論它的優(yōu)點，包括：
數(shù)據(jù)綁定、建立模型屬性、驗證表單、驗證表單后反饋信息、表單指令屬性
下面我們通過案例驗證他們的用法：

一、雙向數(shù)據(jù)綁定（ng-model）和建立模型屬性

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
 <title>Angular Directive</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
 <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body>
<!-- 案例：雙向數(shù)據(jù)綁定 -->
<div class="panel" ng-controller="defaultCtrl">
 <!-- 過濾complete為false的項 -->
 <h3 class="panel-header">To Do List<span class="label label-info">{{(todos | filter : {complete : 'false'}).length}}</span></h3>
 <div class="row-fluid">
 <div class="col-xs-6">
  <div class="form-group row">
  <label for="action">Action: </label>
  <!-- ng-model 雙向綁定 -->
  <!-- 雙向數(shù)據(jù)綁定：數(shù)據(jù)模型（Module）和視圖（View）之間的雙向綁定。 -->
  <!-- 當其中一方發(fā)送更替后，另一個也發(fā)生變化 -->
  <input type="text" id="action" ng-model="newToDo.action" class="form-control">
  </div>
  <div class="form-group row">
  <label for="location">Location: </label>
  <select id="location" class="form-control" ng-model="newToDo.location">
   <option>Home</option>
   <option>Office</option>
   <option>Mall</option>
  </select>
  </div>
  <!-- ng-click點擊Add添加項目 -->
  <button class="btn btn-primary btn-block" ng-click="addNewItem(newToDo)">Add</button>
 </div>
 <div class="col-xs-6">
  <table class="table table-bordered table-striped">
  <thead>
   <tr><th>#</th><th>Action</th><th>Done</th></tr>
  </thead>
  <tbody>
   <tr ng-repeat="item in todos">
   <!-- $index默認為0,遞增 -->
   <td>{{$index + 1}}</td>
   <td>{{item.action}}</td>
   <td>
    <input type="checkbox" ng-model="item.complete"/>
   </td>
   </tr>
  </tbody>
  </table>
 </div>
 </div>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
// define a module named exampleApp
angular.module("exampleApp", [])
 // define a controller named defaultCtrl
 .controller('defaultCtrl', function ($scope) {
 // 數(shù)據(jù)模型
 $scope.todos = [
  { action : "play ball", complete : false },
  { action : "singing", complete : false },
  { action : "running", complete : true },
  { action : "dance", complete : true },
  { action : "swimming", complete : false },
  { action : "eating", complete : false },
 ];
 // 添加數(shù)據(jù)到模型
 $scope.addNewItem = function (newItem) {
  // 判斷是否存在
  if (angular.isDefined(newItem) && angular.isDefined(newItem.action) && angular.isDefined(newItem.location)) {
  $scope.todos.push({
   action : newItem.action + " (" + newItem.location + ")",
   complete : false
  })
  }
 }
 })
</script>
</body>
</html>

首先定義了數(shù)據(jù)模型scope.todos和添加數(shù)據(jù)到模型的addNewItem()方法，接著使用雙向數(shù)據(jù)綁定ng−model將視圖中表單的action和location和模型中的 scope.todos進行綁定，
最后通過ng-click點擊屬性觸發(fā)添加數(shù)據(jù)到模型的addNewItem()方法完成操作

這里寫圖片描述

二、驗證表單
在我們提交表單到服務器之前，我們需要來檢測一下用戶提交的數(shù)據(jù)是否存在或者是說合法，否則提交無用的數(shù)據(jù)會浪費資源。

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
 <title>Angular Directive</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
 <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
 <style>

 </style>
</head>
<body>

<div id="todoPanel" class="panel" ng-controller="defaultCtrl">
 <!-- novalidate表示拋棄瀏覽器自帶的表單驗證，用NG自己的驗證 -->
 <!-- ng-submit="addUser(newUser) 當表單數(shù)據(jù)合法時,提交數(shù)據(jù)到模型 -->
 <form name="myForm" novalidate ng-submit="addUser(newUser)">
 <div class="well">
  <div class="form-group">
  <label>Name:</label>
  <!-- required 表該表單必填 -->
  <!-- ng-model="newUser.name" 雙向數(shù)據(jù)綁定 -->
  <input name="userName" type="text" class="form-control" required ng-model="newUser.name">
  </div>
  <div class="form-group">
  <label>Email:</label>
  <input name="userEmail" type="email" class="form-control"required ng-model="newUser.email">
  </div>
  <div class="checkbox">
   <label>
   <input name="agreed" type="checkbox"ng-model="newUser.agreed" required>
   I agree to the terms and conditions
   </label>
  </div>
  <!-- g-disabled="myForm.$invalid" 當前面填寫表單中的任意一項不合法時，該提交按鈕都是不可用的 -->
  <button type="submit" class="btn btn-primary btn-block" ng-disabled="myForm.$invalid">
  OK
  </button>
 </div>
 <div class="well">
  Message: {{message}}
  <div>
  Valid: {{myForm.$valid}}
  </div>
 </div>
 </form>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
angular.module("exampleApp", [])
 .controller("defaultCtrl", function ($scope) {
 // 添加用戶數(shù)據(jù)到模型$scope.message
 $scope.addUser = function (userDetails) {
 $scope.message = userDetails.name
 + " (" + userDetails.email + ") (" + userDetails.agreed + ")";
 }
 // 顯示驗證前后的結果
 $scope.message = "Ready";
});
</script>
</body>
</html>

首先定義了數(shù)據(jù)模型scope.message和添加數(shù)據(jù)到模型的addUser()方法，接著在視圖中添加表單元素validate、name屬性和ng−submit屬性隨后使用雙向數(shù)據(jù)綁定ng−model將視圖中表單的action和location和模型中的 scope.todos進行綁定，且使用驗證屬性required和email表單
之后對提交按鈕進行禁用，僅當表單數(shù)據(jù)全部合法才能用，不合法都禁用（ng-disabled=”myForm.$invalid”）
最后通過ng-submit屬性提交數(shù)據(jù)到模型的addUser()方法完成操作

這里寫圖片描述

三、表單驗證反饋信息
我們僅僅對表單進行驗證是遠遠不夠的，因為用戶不知道為什么出錯而感到困惑，因此我們需要反饋信息給用戶，讓他們明白該填寫什么
先介紹一下NG中要驗證的類

ng-pristine      用戶沒交互元素被添加到這個類
ng-dirty          用戶交互過元素被添加到這個類
ng-valid         驗證結果有效元素被添加到這個類
ng-invalid      驗證結果無效元素被添加到這個類

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
 <title>Angular Directive</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
 <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
 <style>
 /*交互且必填樣式*/
 form.validate .ng-invalid-required.ng-dirty {
  background-color: orange;
 } 
 /*交互不合法樣式*/
 form .ng-invalid.ng-dirty {
  background-color: lightpink;
 }
 /*郵件不合法且交互過*/
 form.validate .ng-invalid-email.ng-dirty {
  background-color: lightgoldenrodyellow;
 }
 div.error{
  color: red;
  font-weight: bold;
 }
 div.summary.ng-valid{
  color: green;
  font-weight: bold;
 }
 div.summary.ng-invalid{
  color: red;
  font-weight: bold;
 }
 </style>
</head>
<body>

<!-- 案例：雙向數(shù)據(jù)綁定 -->
<div class="panel" ng-controller="defaultCtrl">
 <!-- novalidate="novalidate" 僅僅NG表單驗證 -->
 <!-- ng-submit="addUser(newUser)" 添加數(shù)據(jù)到模型 -->
 <!-- ng-class="showValidation ? 'validate' : '' 當驗證合法，showValidation為true，這是觸發(fā)ng-class為validate -->
 <form name="myForm" class="well" novalidate="novalidate" ng-submit="addUser(newUser)" ng-class="showValidation ? 'validate' : ''">
 <div class="form-group">
 <div class=" form-group">
  <label>Email: </label>
  <input name="email" type="email" class="form-control" required="required" ng-model="newUser.email">
  <!-- 驗證提示信息 -->
  <div class="error">
  <!-- 顯示反饋信息 -->
  <span ng-class="error" ng-show="showValidation">
   {{getError(myForm.email.$error)}}
  </span>
  </div>
 </div>
 <button type="submit" class="btn btn-primary btn-block" >OK</button>
 <div class="well">
  Message : {{message}}
  <!-- 當myForm.$valid驗證合法，showValidation為true，這是觸發(fā)ng-class為ng-valid，否則，ng-invalid -->
  <div class="summary" ng-class="myForm.$valid ? 'ng-valid' : 'ng-invalid'" >
  Valid : {{myForm.$valid}}
  </div>
 </div>
 </form>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
// define a module named exampleApp
angular.module("exampleApp", [])
 // define a controller named defaultCtrl
 .controller('defaultCtrl', function ($scope) {
 // 添加數(shù)據(jù)到模型
 $scope.addUser = function (userDetails) {
  if (myForm.$valid) {
  $scope.message = userDetails.name + " (" + userDetails.email + ") (" + userDetails.agreed + ")"; 
  } else {
  $scope.showValidation = true;
  }
 }
 // 數(shù)據(jù)模型
 $scope.message = "Ready";
 // 錯誤反饋信息
 // 當沒有填寫信息時，提示Please enter a value
 // 當驗證出錯時，提示Please enter a valid email address
 $scope.getError = function (error) {
  if (angular.isDefined(error)) {
  if (error.required) {
   return "Please enter a value";
  } else if (error.email) {
   return "Please enter a valid email address";
  }
  }
 }

 })
</script>
</body>
</html>

首先在style中定義反饋信息的樣式、表單驗證的樣式
接著在JS中寫入錯誤時反饋的信息
最后在視圖中綁定ng-class

這里寫圖片描述

四、表單指令屬性
1.使用input元素

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
 <title>Angular Directive</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
 <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
 <style>

 </style>
</head>
<body>


<div class="panel" id="todoPanel" ng-controller="defaultCtrl">
 <form name="myForm" novalidate="novalidate">
 <div class="well">
  <div class="form-group">
  <label>Text: </label>
  <!-- ng-required="requireValue" 通過數(shù)據(jù)綁定required值 -->
  <!-- ng-minlength="3" ng-maxlength="10" 允許最大最小字符-->
  <!-- ng-pattern="matchPattern" 正則匹配 -->
  <input name="sample" class="form-control" ng-model="inputValue" ng-required="requireValue" ng-minlength="3"
  ng-maxlength="10" ng-pattern="matchPattern">
  </div>
 </div>
 <div class="well">
  <!-- 必填 -->
  <p>Required Error: {{myForm.sample.$error.required}}</p>
  <!-- 最小最大長度 -->
  <p>Min Length Error: {{myForm.sample.$error.minlength}}</p>
  <p>Max Length Error: {{myForm.sample.$error.maxlength}}</p>
  <!-- 只匹配小寫字母 -->
  <p>Pattern Error: {{myForm.sample.$error.pattern}}</p>
  <!-- 驗證合法 -->
  <p>Element Valid: {{myForm.sample.$valid}}</p>
 </div>
 </form>

</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
// define a module named exampleApp
angular.module("exampleApp", [])
 // define a controller named defaultCtrl
 .controller('defaultCtrl', function ($scope) {
 $scope.requireValue = true;
 $scope.matchPattern = new RegExp("^[a-z]");
 })
</script>
</body>
</html>

這里寫圖片描述

2.選擇列表

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
 <title>Angular Directive</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
 <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
 <style>

 </style>
</head>
<body>


<div class="panel" id="todoPanel" ng-controller="defaultCtrl">
 <form name="myForm" novalidate="novalidate">
 <div class="well">
  <div class="form-group">
  <label>Selection an action: </label>
  <!-- 遍歷列表 按照item.place排序 item.id as item.action 改變選項值-->
  <!-- ng-options="item.id as item.action group by item.place for item in todos" -->
  <select ng-model="selectValue" ng-options="item.id as item.action group by item.place for item in todos">
   <option value="" class="">(Pick One)</option>
  </select>
  </div>
 </div>
 <div class="well">
  <p>Selected: {{selectValue || "None"}}</p>
 </div>
 </form>

</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
// define a module named exampleApp
angular.module("exampleApp", [])
 // define a controller named defaultCtrl
 .controller('defaultCtrl', function ($scope) {
 // 模型數(shù)據(jù)
 $scope.todos = [
  { id : 100, place : "School", action : "play ball", complete : false },
  { id : 200, place : "Home", action : "eating", complete : false },
  { id : 300, place : "Home", action : "watch TV", complete : true }
 ];
 })
</script>
</body>
</html>

這里寫圖片描述