用于显示输入错误的 AngularJS 表单验证指令 [英] AngularJS form validation directive for showing input errors
问题描述
我需要创建一个验证指令来自动显示每个输入的所有输入错误.此验证指令应显示当前的所有错误，并且应在用户键入时自动更新错误列表.
I need to create a validation directive for showing all input errors for each input automatically. This validation directive should show all errors at current moment and list of errors should be updated automatically while user is typing.
如果输入是脏的、不是空的和无效的，我需要显示输入的所有错误.我需要将所有错误添加到此输入元素附近的 html 元素中.
I need to show all errors for input if input is dirty, not empty and invalid. I need to add all errors into html element near this input element.
例如，如果输入有 type="email" 和 ng-minlength="5" 并且用户输入了abc"，我需要在此输入附近显示这样的错误:无效的电子邮件；请至少输入 5 个字符；'
For example if input have type="email" and ng-minlength="5" and user typed 'abc' I need to show such errors near this input: 'Invalid email; Please enter at least 5 characters;'
例如，如果输入的 type="number" attr 和 min="200" 和 min-model="minnumber" 和 minnumber 模型设置为300"并且用户输入了100"，我需要在此附近显示此类错误input: '请输入最少 500 个；应该大于 Min Number;'
For example if input has type="number" attr and min="200" and min-model="minnumber" and minnumber model set to '300' and user typed '100' I need to show such errors near this input: 'Please enter the minimum number of 500; Should be greater than Min Number;'
如果相关模型(最小模型参数)更新，我还需要更新上一个示例中输入的所有错误消息.
Also I need to update all errors messages for input in prev example if related model (min-model param) is updated.
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;
}
});
}
};
});
你能帮忙制定这个验证指令吗?
或者你能指出我正确的方向吗?
附言UI-Utils 做了类似的事情，但他们的指令不能在一个地方设置类似的错误消息.
P.S. Something similar is made with UI-Utils but their directive does not give ability to set similar error messages in one place.
推荐答案
我想建议看看这篇文章作者在解释如何实现你的目标，你可以深入研究代码.链接
I want to suggest look at this post in this post author is explaining how to achieve your goals , and you can deeply dive into the code . link
此帖子中显示错误消息的示例
example from this post showing error messages
module = angular.module('app', []);
module.directive('showErrors', function($timeout) {
return {
restrict: 'A',
require: '^form',
link: function (scope, el, attrs, formCtrl) {
// find the text box element, which has the 'name' attribute
var inputEl = el[0].querySelector("[name]");
// convert the native text box element to an angular element
var inputNgEl = angular.element(inputEl);
// get the name on the text box
var inputName = inputNgEl.attr('name');
// only apply the has-error class after the user leaves the text box
var blurred = false;
inputNgEl.bind('blur', function() {
blurred = true;
el.toggleClass('has-error', formCtrl[inputName].$invalid);
});
scope.$watch(function() {
return formCtrl[inputName].$invalid
}, function(invalid) {
// we only want to toggle the has-error class after the blur
// event or if the control becomes valid
if (!blurred && invalid) { return }
el.toggleClass('has-error', invalid);
});
scope.$on('show-errors-check-validity', function() {
el.toggleClass('has-error', formCtrl[inputName].$invalid);
});
scope.$on('show-errors-reset', function() {
$timeout(function() {
el.removeClass('has-error');
}, 0, false);
});
}
}
});
module.controller('NewUserController', function($scope) {
$scope.save = function() {
$scope.$broadcast('show-errors-check-validity');
if ($scope.userForm.$valid) {
alert('User saved');
$scope.reset();
}
};
$scope.reset = function() {
$scope.$broadcast('show-errors-reset');
$scope.user = { name: '', email: '' };
}
});
这篇关于用于显示输入错误的 AngularJS 表单验证指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
