Angular的事件和表單詳解

2019-11-19 18:15:18

字體：大中小

供稿：網(wǎng)友

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

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>

如果我們希望一個(gè)select選中指定的option，只需要設(shè)置該option為selected="selected"，現(xiàn)在為第二個(gè)綁定一個(gè)變量aaa，對(duì)應(yīng)了一個(gè)單選框的ng-model，但單選框選中時(shí)aaa為true，取消選中時(shí)為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>

當(dāng)輸入框的內(nèi)容發(fā)現(xiàn)改變的時(shí)候，讓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>

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

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

下面看個(gè)具體的表單驗(yàn)證的例子：

<!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}}   驗(yàn)證失敗：{{myForm.name.$invalid}}   驗(yàn)證成功：{{myForm.name.$valid}}   required：{{myForm.name.$error.required}}  </p>  <p>   URL:{{user.url}}   沒修改：{{myForm.url.$pristine }}   修改過：{{myForm.url.$dirty}}   驗(yàn)證失敗：{{myForm.url.$invalid}}   驗(yàn)證成功：{{myForm.url.$valid}}   錯(cuò)誤詳情：{{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) {   //驗(yàn)證表單是否可是提交   if (isValid) {    console.log(data);   }else{    console.log('驗(yàn)證失敗');   }  }; }]);</script></body></html>

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

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

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

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

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

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

用戶名:{{user.name}}
沒修改：{{myForm.name.$pristine }}
修改過：{{myForm.name.$dirty}}
驗(yàn)證失敗：{{myForm.name.$invalid}}
驗(yàn)證成功：{{myForm.name.$valid}}
required：{{myForm.name.$error.required}}

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

在用戶名的input的同級(jí)上有兩個(gè)span元素，分別是正確和錯(cuò)誤的圖標(biāo)。（ng-show用于控制元素的顯示和隱藏，後面會(huì)詳細(xì)介紹）

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

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

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