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
Vous devez vous connecter pour publier un commentaire.
Je veux suggérer de regarder ce post dans ce post, l'auteur explique comment atteindre vos objectifs , et vous pouvez profondément plongée dans le code .
lien
exemple de ce poste affiche les messages d'erreur
Prendre un coup d'oeil à la
ng-messages
la directive. Son assez élégant. Exemple:Vous pouvez ensuite combiner avec n'importe quel de validation de formulaire. Il suffit de placer les messages d'erreur de l'validateurs sur les éléments de $erreur de l'objet et ils sont automatiquement rendus dans votre INTERFACE utilisateur.
Voici le modèle que j'ai utilisé (Angulaire 1.3):
Ensuite, j'ai été en mesure de vérifier les erreurs dans le code HTML (avec Bootstrap 3.3) à l'aide de ce modèle:
Explication:
La
number
attribut dans la<input name="value">
tag déclenche la directive, ce qui provoque langModel
validateur'number'
pour être appelés, et à définir/annulervalue.$error.number
.Si
value.$error.number
est défini, lahas-error
classe est appliquée à laform-group
de sorte qu'il affiche un rouge champ de saisie et le message d'aide est affiché.all input errors for each input automatically
Personnellement, je vois plus d'inconvénients que d'avantages à partir de cette phrase.
1. Cacher les messages d'erreur en javascript dans html.
et je crois que c'est le chemin à parcourir.
2. En ajoutant de la complexité pour l'avenir des messages d'erreur personnalisés.
Que faire si votre prochain développeur veut changer des messages d'erreur,
Hey, your input is too short
.Avez-vous voulez lui abandonner vos messages d'erreur généraux? Ou, le changement dans votre javascript?
Que faire si votre prochain développeur d'ajouter des messages d'erreur personnalisés à l'aide de
ng-show
.Ensuite, vous avez deux messages d'erreur ce qui signifie la même.
Alors, serez-vous pas de permettre à l'avoir? ou, votre directive générale message d'erreur doit être caché? Ou, à appliquer cette message d'erreur personnalisé en général message d'erreur? Si oui, comment? Voir, il devient complexe.
À mon humble avis, ce message d'erreur général ne fonctionne que lorsque vous êtes très sûr de ce qui suit;
Si vous n'êtes pas sûr de ce qui précède je l'ai mentionné, je vous recommande de ne pas créer de messages d'erreur généraux.