両方のフィールドが入力された後に検証する必要がある 2 つの入力フィールドがあります。クレジットカードの有効期限なので、monthとがありyearます。実際に検証を行うためにサードパーティのサービスを使用しています。
したがって、exp、expMonth、およびの 3 つのディレクティブをセットアップしますexpYear。
を使用し$watchてユーザー入力を検証しますが、検証が false の場合はエラーを表示したいと思います。を使おうとするng-classとexampleForm.$error.expiry、Error: [$rootScope:infdig] 10 $digest() iterations reached.
ここにデモがあります http://plnkr.co/edit/SSiSfLB8hEEb4mrdgaoO?p=preview
view.html
<form name='exampleForm' novalidate>
<div class="form-group" ng-class="{ 'is-invalid': exampleForm.$error.expiry }">
<div class="expiration-wrapper" exp>
<input type='text' ng-model='data.year' name='year' exp-month />
<input type='text' ng-model='data.month' name='month' exp-year />
</div>
</div>
exp.directive.js
angular.module('example')
.directive('exp', ['ThirdPartyValidationService',
function(ThirdPartyValidationService) {
return {
restrict: 'A',
require: 'exp',
link: function(scope, element, attrs, ctrl) {
ctrl.watch();
},
controller: function($scope, $element, ThirdPartyValidationService) {
var self = this;
var parentForm = $element.inheritedData('$formController');
var ngModel = {
year: {},
month: {}
};
var setValidity = function(exp) {
var expMonth = exp.month;
var expYear = exp.year;
var valid = ThirdPartyValidationService.validateExpiry(expMonth, expYear);
parentForm.$setValidity('expiry', valid, $element);
};
self.setMonth(monthCtrl) {
ngModel.month = monthCtrl;
};
self.setYear(yearCtrl) {
ngModel.year = yearCtrl;
};
self.watch = function() {
$scope.$watch(function() {
return {
month: ngModel.month.$modelValue,
year: ngModel.year.$modelValue
};
}, setValidity, true);
};
}
};
}]);
expMonth.directive.js
angular.module('example')
.directive('expMonth', [
function() {
return {
restrict: 'A',
require: ['ngModel', '^?exp'],
compile: function(element, attributes) {
return function(scope, element, attributes, controllers) {
var formCtrl = controllers[0];
var expMonthCtrl = controllers[1];
expMonthCtrl.setMonth(formCtrl);
};
};
};
}]);
expYear.directive.js
angular.module('example')
.directive('expYear', [
function() {
return {
restrict: 'A',
require: ['ngModel', '^?exp'],
compile: function(element, attributes) {
return function(scope, element, attributes, controllers) {
var formCtrl = controllers[0];
var expYearCtrl = controllers[1];
expYearCtrl.setYear(formCtrl);
};
};
};
}]);