Мне нужно создать директиву проверки для автоматического отображения всех входных ошибок для каждого входа. Эта директива проверки должна показывать все ошибки в текущий момент, и список ошибок должен автоматически обновляться во время ввода пользователем.
Мне нужно показать все ошибки для ввода, если вход грязный, а не пустой и недействительный. Мне нужно добавить все ошибки в элемент html возле этого элемента ввода.
Например, если вход имеет тип = "email" и ng-minlength = "5", и пользователь набрал "abc". Мне нужно показать такие ошибки рядом с этим вводом: "Недействительный адрес электронной почты; Введите не менее 5 символов;
Например, если вход имеет тип = "число" attr и min = "200", а min-model = "minnumber" и модель minnumber, установленная на "300", и пользователь напечатал "100". Мне нужно показать такие ошибки рядом с этим input: 'Введите минимальное число 500; Должно быть больше Min Number; '
Также мне нужно обновить все сообщения об ошибках для ввода в предыдущем примере, если обновлена соответствующая модель (параметр min-model).
var app = angular.module('app', []);
app.controller('appCtrl', function ($scope) {
});
app.directive('validate', function () {
return {
restrict: 'A',
require: 'ngModel', // require: '^form',
link: function (scope, element, attrs, ctrl) {
console.log('======================');
console.log(scope);
console.log(element);
console.log(attrs);
console.log(ctrl);
console.log(scope.form.$error);
angular.forEach(scope.form.$error, function (value, key) {
console.log('scope.form.$error = ' + key + ': ' + value);
console.log(value);
});
}
};
});
app.directive('positiveInteger', function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ctrl) {
ctrl.$parsers.unshift(function (viewValue) {
var INTEGER_REGEXP = /^\d+$/;
if (INTEGER_REGEXP.test(viewValue)) { // it is valid
ctrl.$setValidity('positiveInteger', true);
return viewValue;
} else { // it is invalid, return undefined (no model update)
ctrl.$setValidity('positiveInteger', false);
return undefined;
}
});
}
};
});
app.directive('positiveFloat', function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ctrl) {
ctrl.$parsers.unshift(function (viewValue) {
var FLOAT_REGEXP = /^(?:[1-9]\d*|0)?(?:\.\d+)?$/;
if (FLOAT_REGEXP.test(viewValue)) { // it is valid
ctrl.$setValidity('positiveInteger', true);
return viewValue;
} else { // it is invalid, return undefined (no model update)
ctrl.$setValidity('positiveInteger', false);
return undefined;
}
});
}
};
});
app.directive('minModel', function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ctrl) {
ctrl.$parsers.unshift(function (viewValue) {
if (viewValue > scope[attrs.minModel]) { // it is valid
ctrl.$setValidity('minModel', true);
return viewValue;
} else { // it is invalid, return undefined (no model update)
ctrl.$setValidity('minModel', false);
return undefined;
}
});
}
};
});
Можете ли вы помочь в создании этой директивы валидации?
Или, может быть, вы можете направить меня в правильном направлении?
Ссылка на JSFiddle с некоторым кодом для тестирования.
P.S. Нечто похожее делается с UI-Utils, но их директива не дает возможности устанавливать похожие сообщения об ошибках в одном месте.
