AngularJS 自定義表單驗證$parsers
阿新 • • 發佈：2019-01-25
當用戶同控制器進行互動，並且ngModelController中的$setViewValue()方法被呼叫時，$parsers陣列中的函式會以流水線的形式被逐個呼叫。第一個$parse被呼叫後，執行結果會傳遞給第二個$parse，以此類推。
這些函式可以對輸入值進行轉換，或者通過$setValidity()函式設定表單的合法性。
使用$parsers陣列是實現自定義驗證的途徑之一。例如，假設我們想要確保輸入值在某兩個數值之間，可以在$parsers陣列中入棧一個新的函式，這個函式會在驗證鏈中被呼叫。
每個$parser返回的值都會被傳入下一個$parser中。當不希望資料模型發生更新時返回undefined。
這些函式可以對輸入值進行轉換，或者通過$setValidity()函式設定表單的合法性。
使用$parsers陣列是實現自定義驗證的途徑之一。例如，假設我們想要確保輸入值在某兩個數值之間，可以在$parsers陣列中入棧一個新的函式，這個函式會在驗證鏈中被呼叫。
每個$parser返回的值都會被傳入下一個$parser中。當不希望資料模型發生更新時返回undefined。
angular.module('myApp',[]).directive('oneToTen',function(){ return{ require : '?ngModel', link : function(scope,ele,attrs,ngModel){ if(!ngModel){ return ; } ngModel.$parsers.unshift(function(viewValue){ var i = parseInt(viewValue) ; if(i >= 0 && i < 10){ ngModel.$setValidity('oneToTen',true) ; //這裡的oneToTen對應錯誤的屬性，類似$error.required、$error.email中的required,email屬性 return viewValue ; }else{ ngModel.$setValidity('oneToTen',false) ; return undefined ; } }) ; } } ; }) ;
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form name="editForm"> <input type="text" ng-model="age" one-to-ten="" name="age"> <span ng-show="editForm.age.$error.oneToTen">Error</span> </form> <script type="text/javascript" src="../js/angular.js"></script> <script type="text/javascript" src="../js/controller/myCtrl.js"></script> </body> </html>
