Directive de validation de formulaire AngularJS pour montrer les erreurs de saisie

J'ai besoin de créer une validation de la directive pour montrer toutes les erreurs de saisie pour chaque entrée automatiquement.
Cette validation directive devrait montrer toutes les erreurs au moment actuel et de la liste des erreurs doit être mis à jour automatiquement lorsque l'utilisateur est en train de taper.

J'ai besoin de montrer toutes les erreurs d'entrée si l'entrée est sale, non vide et non valides. J'ai besoin d'ajouter toutes les erreurs dans l'élément html à proximité de cet élément d'entrée.

Par exemple, si input type="email" et ng-minlength="5" et l'utilisateur a tapé " abc " j'ai besoin de montrer de telles erreurs près de cette entrée: 'Invalid email; Veuillez entrer au moins 5 caractères;'

Par exemple, si l'entrée a type="number" attr et min="200" et min-model="minnumber" et minnumber modèle défini à '300' et l'utilisateur a tapé '100' j'ai besoin de montrer de telles erreurs près de cette entrée: "Veuillez entrer le nombre minimum de 500; Devrait être de plus de Min Nombre;'

Aussi j'ai besoin de mettre à jour tous les messages d'erreurs pour l'entrée dans le précédent exemple, si un modèle associé (min-modèle param) est mis à jour.

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;
}
});
}
};
});

Peut vous aider à faire de cette validation directive?

Ou peut-être pouvez-vous me diriger dans la bonne direction?

Lien vers JSFiddle avec un peu de code pour les tests.

P. S. quelque Chose de similaire est faite avec UI-Utils mais leurs directive ne donne pas de possibilité de définir des messages d'erreur similaires dans un seul endroit.

source d'informationauteur webvitaly