Message d'erreur de validation de formulaire personnalisé AngularJS
Existe-t-il un moyen de passer un message d'erreur dans la validation de formulaire personnalisé?
Par exemple, j'ai une directive qui vérifie un nom d'utilisateur. Il y a trois résultats possibles:
- , Il est valide
- Il est invalide car ce n'est pas un bon nom d'utilisateur ("this.is-invalid")
- Il n'est pas valide car il est déjà utilisé
J'ai une directive comme (pseudo-html simplifié):
<input type="text" namecheck></input><span ng-show="name.$error.namecheck">You had an error {{ error }}</span>
Et dans ma directive personnalisée, je peux faire
// check for a conflict and valid name here
ngModel.$setValidity("namecheck",false);
Mais comment passer une erreur message qui indique si le problème était un conflit ou un nom invalide? Y a - t-il quelque chose comme ngModel.$setValidityErrorMessage()?
3 réponses
Comme je l'ai écrit dans les commentaires, je viens de le comprendre. J'ai juste besoin d'utiliser différents drapeaux de validité. Rien ne dit que je dois utiliser la même clé dans $setValidity() que le nom de la directive!
<span ng-show="name.$error.nameinvalid">This is not a valid username, it must be alphanmueric</span>
<span ng-show="name.$error.nametaken">Sorry, the username {{ name }} is already taken</span>
Et dans la directive
// if I got a 409
ngModel.$setValidity("nametaken",false);
// if I got a 400
ngModel.$setValidity("nameinvalid",false);
Le nom de La $error est le message d'erreur!
Non. Définir la validité sur un élément de formulaire ajoute simplement la classe appropriée à l'élément, qui peut ensuite être utilisée pour styliser l'élément pour indiquer une erreur. Il n'y a pas de messages d'erreur qui indiquent pourquoi l'élément est invalide. Angular ne fournit pas ce support.
Vous avez peut-être remarqué des messages d'erreur qui apparaissent sur les champs required qui sont vides? Dans chrome, ils disent quelque chose comme: "Veuillez remplir ce champ" ou quelque chose. Ceux-ci sont spécifiques au navigateur et ne le sont pas lié à angulaire en aucune façon.
Vous devrez lancer votre propre service de messagerie d'erreur. Vous pouvez utiliser les mêmes classes ng-invalid pour vérifier quand un élément de formulaire est invalide et afficher les messages d'erreur basés sur cela, mais Angular ne le fournit pas hors de la boîte.
Il y a un exemple dans les documents angulaires (trouvé ici) qui montre une façon de le faire.
Mise à jour:
Depuis Angular 1.3, il existe maintenant un support pour les directives ngMessage et ngMessages. Ces nouvelles directives tentent de rendre la validation de formulaire et la messagerie d'erreur moins compliquées. Les documents angulaires pour ces directives sont ici . Consultez le lien pour plus de détails.
À mon avis, vos trois règles incluent à la fois la validation client et serveur. Je vais valider les deux premiers côté client et valider la dernière règle côté serveur. Parce qu'un nom d'utilisateur est dupliqué ou non, nous l'obtenons jusqu'à ce que nous le postions sur le serveur. Donc, ma pratique est la suivante:
<div class="col-md-offset-3 col-md-9" ng-show="detailForm.$error && detailForm.name.$invalid && (detailForm.name.$touched || detailForm.$submitted)"
ng-messages="detailForm.name.$error">
<div class="error-message" ng-message="required">the field is required </div>
<div class="error-message" ng-message="maxlength">you are too lang</div>
<div class="error-message" ng-message="pattern">your format is incorrect </div>
</div>
<div class="col-md-offset-3 col-md-9" ng-show="serverError && serverError.name">
<div class="error-message">{{serverError.name}}</div>
</div>