web-dev-qa-db-fra.com

Message d'erreur de validation de formulaire personnalisé AngularJS

Existe-t-il un moyen de transmettre un message d'erreur lors de la validation d'un formulaire personnalisé?

Par exemple. J'ai une directive qui vérifie un nom d'utilisateur. Il y a trois résultats possibles:

  1. C'est valide
  2. Il n'est pas valide car ce n'est pas un bon nom d'utilisateur ("this.is-invalid")
  3. 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 puis-je transmettre un message d'erreur indiquant si le problème était un conflit ou un nom invalide? Y a-t-il quelque chose comme ngModel.$setValidityErrorMessage()?

angularjsangularjs-directive
25
deitch

Comme je l'ai écrit dans les commentaires, je viens de le comprendre. J'ai juste besoin d'utiliser différents indicateurs 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 du $error est le message d'erreur!

44
deitch

La définition de la validité d'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 afin d'indiquer une erreur. Il n'y a pas de message d'erreur indiquant 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? En chrome ils disent quelque chose comme: "S'il vous plaît remplir ce champ" ou quelque chose. Celles-ci sont spécifiques à votre navigateur et ne sont en aucun cas liées à angular.

Vous devez lancer votre propre service de messagerie d'erreur. Vous pouvez utiliser les mêmes classes ng-invalid pour vérifier si un élément de formulaire est invalide et afficher les messages d'erreur basés sur celui-ci, mais Angular ne le fournit pas directement.

Il y a un exemple dans la documentation angulaire (trouvé ici ) qui montre une façon de le faire. 

METTRE À JOUR:

Depuis Angular 1.3, les directives ngMessage et ngMessages sont maintenant prises en charge. Ces nouvelles directives tentent de simplifier la validation des formulaires et la messagerie d'erreur. Les documents angulaires pour ces directives sont ici . Consultez le lien pour plus de détails.

2
tennisgent

À mon avis, vos trois règles incluent la validation du client et du serveur. Je vais valider les deux premiers du côté client et la dernière règle de validation du côté serveur . Parce qu'un nom d'utilisateur est dupliqué ou non, nous l'obtenons jusqu'à ce que nous le publions sur le serveur . Donc, ma pratique est la suivante: Suivant:

 <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>
0
gary gao