在某些情況下,AngularJS 官方提供的 validation 無法滿足我們的需求。
ex: 驗證手機電話號碼、台灣的郵遞區號等。
就是要自己寫 validation 的時候了!
angularJS documentation 有簡單的範例。
https://docs.angularjs.org/guide/forms#custom-validation
以下是我參考範例寫驗證兩個 inputs 是不是有一樣的值。
(範例:請再次輸入一樣密碼的 validation)
http://plnkr.co/edit/IlVF8jMRm6uZsUvp5osb?p=preview
angular.module('myExample')
.directive(‘myMatchValidate', function () {
return {
restrict: 'A',
// 必須使用 ngModel 取得 input value
require: 'ngModel',
scope: {
// pass 想要比對的值
match: '='
},
link: function (scope, element, attrs, ngModel) {
// 假如沒有 ngModel 就不用檢查了..
if (!ngModel) return;
// $parsers 是檢查使用者輸入的 value
ngModel.$parsers.unshift(checker);
// $formatter 是檢查來自程式的改變
ngModel.$formatters.unshift(checker);
// watch 第一個 input value 的改變
scope.$watch('match', function () {
checker(ngModel.$viewValue);
});
function checker (value) {
if (ngModel.$pristine && value) {
// 更新 input $dirty 跟 $pristine
// 因為非使用者變更不會影響到 $dirty 跟 $pristine
ngModel.$pristine = false;
ngModel.$dirty = true;
}
// 測試 value
var valid = scope.match === value;
// 重要:設定 validation 是 true 還是 false
ngModel.$setValidity('matchValidate', valid);
// return value anyway,
// 因為我只要確保 input validation, 不會真正取用 input value
return value;
}
}
}
});
例子中,ng-model 的觀念很重要的 。
官網 documentation 有解釋 ngModel 可以用來做些什麼。
截取至官網:
The ngModel directive binds an input,select, textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.
ngModel is responsible for:
Binding the view into the model, which other directives such as input, textarea orselect require.
Providing validation behavior(i.e. required, number, email, url).
Keeping the state of the control (valid/invalid, dirty/pristine, touched/untouched, validation errors).
Setting related css classes on the element ( ng-valid, ng-invalid, ng-dirty,ng-pristine, ng-touched, ng-untouched) including animations.
Registering the control with its parent form.
ngModelController 顧名思義就是 ng-model 的 controller。
裡面提供當你使用 ng-model 可以操作的 functions。
例如,$formatters 跟 $parsers 就是當 ng-model 的 value 改變的時候,所觸發的 functions。
我們可以在這兩個 functions 插入檢查點,檢查 ng-model 當下的正確性。
之後再用 ngModelController 的 $setValidity 去設定 input 的 validation 。