快捷導(dǎo)航

Angular的事件和表單詳解

更新時間：2016年12月26日 15:53:58 作者：小謝53

這篇文章主要為大家詳細介紹了Angular的事件和表單，具有一定的參考價值，感興趣的小伙伴們可以參考一下

前面的文章說道了click事件，與其類似的mouseover以及mousemove等等。下面看看selected、change、copy等運用在表單的事件吧。

selected

<div ng-controller="Aaa">
 
 <input type="checkbox" ng-model="aaa" value="{{aaa}}">
 <select>
  <option>11111</option>
  <option ng-selected="aaa">22222</option>
  <option>33333</option>
 </select>

</div>

<script type="text/javascript">
 var m1 = angular.module('myApp',[]);
 m1.controller('Aaa',['$scope',function($scope){}]);
</script>

如果我們希望一個select選中指定的option，只需要設(shè)置該option為selected="selected"，現(xiàn)在為第二個綁定一個變量aaa，對應(yīng)了一個單選框的ng-model，但單選框選中時aaa為true，取消選中時為false，這樣就能設(shè)置option的selected了。

change

<div ng-controller="Aaa">
 <input type="text" ng-change="bbb='hello'" ng-model="bbb">
 <p>{{bbb}}</p>
</div>

<script type="text/javascript">
 var m1 = angular.module('myApp',[]);
 m1.controller('Aaa',['$scope',function($scope){}]);
</script>

當輸入框的內(nèi)容發(fā)現(xiàn)改變的時候，讓bbb變量設(shè)為'hello'。

copy

<div ng-controller="Aaa">
 <input type="text" value="xiecg" ng-copy="ccc='hello'">
 <p>{{ccc}}</p>
</div>

<script type="text/javascript">
 var m1 = angular.module('myApp',[]);
 m1.controller('Aaa',['$scope',function($scope){}]);
</script>

當我們粘貼內(nèi)容到輸入框的時候，ccc的值變成'hello'。

除此之外，還有cut(剪切)、paste(粘貼事件)。

下面看個具體的表單驗證的例子：

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>input相關(guān)指令詳解</title>
<link rel="stylesheet" >
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script>
<style type="text/css">
  .username .ng-valid{background-color:lightgreen;}
  .username .ng-invalid{background-color:lightcoral;}
  .username .ng-pristine{background-color:#fafafa;}
  /*
  .username .ng-dirty{}
  .username .ng-invalid-required{}
  .username .ng-invalid-minlength{}
  .username .ng-valid-max-length{}
  */

</style>
</head>
<body>

<div ng-controller="Aaa">
 <div class="col-md-6">
  <form role="form" name="myForm" ng-submit="submitForm(myForm.$valid,user)" class="form-horizontal" novalidate>
   <div class="form-group has-feedback">
    <div class="col-md-4">
     <label for="name">用戶名</label>
    </div>
    <div class="col-md-8 username">
     <input class="form-control" id="name" name="name" type="text" required ng-pattern="/^[a-zA-Z]{0,6}$/" ng-model='user.name' />
     <span class="glyphicon glyphicon-ok form-control-feedback" ng-show="myForm.name.$dirty && myForm.name.$valid"></span>
     <span class="glyphicon glyphicon-remove form-control-feedback" ng-show="myForm.name.$dirty && myForm.name.$invalid"></span>
    </div>
   </div>

   <div class="form-group has-feedback">
    <div class="col-md-4">
     <label for="url">URL</label>
    </div>
    <div class="col-md-8">
     <input type="url" id="url" name="url" ng-model="user.url" class="form-control" />
     <span class="glyphicon glyphicon-ok form-control-feedback" ng-show="myForm.url.$dirty && myForm.url.$valid"></span>
    </div>
   </div>
   <div class="form-group text-center">
    <input class="btn btn-primary btn-lg" ng-disabled="myForm.$invalid" type="submit" value="提交" />
   </div>
  </form>  
 </div>
 <div class="col-md-12">
  <p>
   用戶名:{{user.name}}
   沒修改：{{myForm.name.$pristine }}
   修改過：{{myForm.name.$dirty}}
   驗證失敗：{{myForm.name.$invalid}}
   驗證成功：{{myForm.name.$valid}}
   required：{{myForm.name.$error.required}}
  </p>
  <p>
   URL:{{user.url}}
   沒修改：{{myForm.url.$pristine }}
   修改過：{{myForm.url.$dirty}}
   驗證失?。簕{myForm.url.$invalid}}
   驗證成功：{{myForm.url.$valid}}
   錯誤詳情：{{myForm.url.$error}}
  </p>
 </div>
</div>

<script type="text/javascript">
 var m1 = angular.module('myApp',[]);
 m1.controller('Aaa',['$scope','$interval',function($scope,$interval){
  $scope.submitForm = function(isValid,data) {
   //驗證表單是否可是提交
   if (isValid) {
    console.log(data);
   }else{
    console.log('驗證失敗');
   }
  };
 }]);
</script>
</body>
</html>

首先看看表單部分，使用了novalidate屬性禁用了表單默認驗證行為，并綁定了ng-submit綁定了submitForm方法。

在用戶名的input上設(shè)置了required，表示不能為空。ng-pattern是自定義的正則表達式。ng-model是數(shù)據(jù)(用戶填寫的數(shù)據(jù))。

URL的input也是類似的設(shè)置。

看一下在form綁定的submitForm函數(shù)，傳遞了兩個參數(shù)，myForm.$valid以及user。

myForm是form的name，代表整個表單，myForm.$valid是個布爾值，表示整個表單的元素是否通過驗證，user是用戶填寫的數(shù)據(jù)，用于提交數(shù)據(jù)。我們都可以通過controller得到這些信息，然後提交給後端。

myForm代表整個表單，給input附上name值，就可以得到input的驗證信息，我們以用戶名的input為例。

用戶名:{{user.name}}
沒修改：{{myForm.name.$pristine }}
修改過：{{myForm.name.$dirty}}
驗證失?。簕{myForm.name.$invalid}}
驗證成功：{{myForm.name.$valid}}
required：{{myForm.name.$error.required}}

這里除了第一個之外，其他都是布爾值。

在用戶名的input的同級上有兩個span元素，分別是正確和錯誤的圖標。（ng-show用于控制元素的顯示和隱藏，後面會詳細介紹）

myForm.name.$dirty && myForm.name.$valid 當用戶修改input的值了，并且驗證成功了，我們給予正確的提示。

myForm.name.$dirty && myForm.name.$invalid 當用戶修改input的值了，但是遺憾驗證失敗了，我們給予失敗的提示。

除此之外，angular提供了class為我們做更多樣式上的提示。