2 つの検証ディレクティブを作成しました。それぞれが個別にうまく動作しますが、両方が適用されると、rangeValidator が失敗するたびに numberValidator が失敗します (したがって、"3" は rangeValidator に失敗するため、rangeValidator が画像の外にある場合でも、numberValidator も失敗します)。
ロギングにより、numberValidator が実際に失敗していることを確認します (HTML の一部のエラーに対して)。
ディレクティブが互いに独立して機能することを期待していました。ユーザーが「3」を入力しても、「数値でなければなりません」と表示されることは望ましくありません。
数値入力の使用はオプションではありません。
私のJS：
app.directive('rangeValidator', function () {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ctrl) {
var min = scope.$eval(attrs.minValue);
var max = scope.$eval(attrs.maxValue);
ctrl.$parsers.unshift(function (viewValue) {
if (parseInt(viewValue) >= min && parseInt(viewValue) <= max) {
// it is valid
ctrl.$setValidity('rangeValidator', true);
return viewValue;
} else {
// it is invalid, return undefined (no model update)
ctrl.$setValidity('rangeValidator', false);
return undefined;
}
});
}
};
});
app.directive('numberValidator', function () {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift(function (viewValue) {
if (!isNaN(parseInt(viewValue))) {
// it is valid
console.log('Number Validator passed!');
ctrl.$setValidity('numberValidator', true);
return viewValue;
} else {
// it is invalid, return undefined (no model update)
ctrl.$setValidity('numberValidator', false);
return undefined;
}
});
}
};
});