web-dev-qa-db-fra.com

Comment faire en sorte que ngMessage pour les champs obligatoires ne s'affiche que lorsqu’il est sale ou lors de la soumission d’un formulaire?

J'utilise AngularJS 1.3.0 RC0 et angular-messages. ng-messages affiche consciencieusement des messages d'erreur pour ces champs "obligatoires" lorsqu'un formulaire est initialement chargé et vierge. Ainsi, la page de formulaire nouvellement chargée est remplie de messages d'erreur. Ce n'est pas ce que je veux. Comment faire en sorte que ngMessage pour les champs obligatoires ne s'affiche que lorsque ces champs sont sales ou qu'ils soumettent un formulaire?

J'ai lu le document officiel, aucun indice. Et essayé de mettre "ng-show =" fieldName. $ Dirty "" dans le div ng-messages, ne fonctionnait pas. Toute aide serait très appréciée!

angularjsforms
43
Nicole Naumann

Utilisez le ng-if attribut à vérifier pour $dirty sur l'étiquette qui a ng-messages.

Exemple :

<div ng-messages='myForm.myControl.$error' ng-if='myForm.myControl.$dirty'>
    <div ng-message='required'>Required field</div>
</div>
90
Eoinii

La meilleure façon de faire est avec $ touched:

<div class="help-block" ng-messages="userForm.name.$error" ng-show="userForm.name.$touched">
    ...
</div>
20
Darren

Seulement si sale:

<div ng-messages="myForm.myField.$dirty && myForm.myField.$error">
    <div ng-message='required'>Required field</div>
</div>

Seulement si le formulaire est soumis:

<div ng-messages="myForm.$submitted && myForm.myField.$error">
    <div ng-message='required'>Required field</div>
</div>
14
John Knoop

Au lieu d'utiliser le ng-si suggéré, vous pourriez faire quelque chose comme ...

<div ng-messages='myForm.myControl.$error' ng-if='submitted'>
   <div ng-message='required'>Required field</div>
</div>

Et sur votre bouton d'envoi, ajoutez:

ng-click="submitted=true"

Vous voudrez probablement redéfinir '$ scope.submitted' lorsque vous tapez à nouveau, pour pouvoir l'ajouter à votre saisie de texte/email:

ng-keyup="submitted=false"

De cette façon, seul le bouton d'envoi modifiera '$ scope.submitted' en vrai et tout ce que vous ferez le définira comme faux, masquant ainsi votre message d'erreur jusqu'à ce que vous cliquiez sur le bouton d'envoi.

12
LT86

Je ne voulais pas montrer mon message tant qu'il n'y avait pas d'erreur ou que l'utilisateur essayait de soumettre la page, et aucune des solutions ci-dessus ne fonctionnait.

Finalement, j'ai réussi avec ceci:

<form name='frmUser'>
..........
..........
<div ng-messages="frmUser.firstName.$error" 
     ng-show='frmUser.$submitted || frmUser.firstName.$dirty' role="alert">
      <div ng-message="required" class="err">Required</div>
      <div ng-message="maxlength" class="err">Maximum 50 characters.</div>
</div>
<input ng-model="model.first"
       name="firstName"
       type="text"
       ng-required="true"
       ng-maxlength="50"
       placeholder="Enter your first name" />

</form>

Si vous tapez quelque chose qui n'est pas valide, montrez l'erreur

Si vous essayez de soumettre la page et que vous n'avez pas fourni le champ requis, une erreur s'affichera.

5
Ali Adravi

Les messages d'erreur apparaissent-ils toujours après que vous ayez satisfait à leurs conditions? Dans ce cas, avez-vous pensé à prendre une dépendance sur ngMessages dans votre module angular module? Par exemple:

angular.module("exampleModule", ["ngMessages"]);
4
Larrifax

J'ai trouvé cette réponse utile, mais cela n'a pas résolu le problème du message d'erreur qui traînait pour toujours. Je suis venu avec une utilisation légèrement plus complexe de show et hide comme suit:

<div class="help-block"
    ng-messages="addPlanForm.planName.$error"
    ng-show="addPlanForm.$submitted || addPlanForm.planName.$dirty || (addPlanForm.planName.$invalid && addPlanForm.planName.$touched)">
    <p ng-message="required" ng-hide="addPlanForm.planName.$valid">Your name is required.</p>
</div>

En ajoutant ng-hide au message généré en cas d'erreur, le message disparaît lorsque l'utilisateur corrige l'erreur. Vraiment cool. J'adore angulaire.

2
user1416192

Juste essayer ceci

<div ng-messages='myForm.fieldName.$error && (myForm.fieldName.$dirty || myForm.$submitted)' >
    <div ng-message='required'>Required field</div>
</div>
2
byteC0de
<input required type="text" ng-model="model" name="field" ng-maxlength="13" ng-minlength="10">     
<div ng-messages="form.field.$error" ng-if='form.$submitted'>
            <p ng-message="required">Required</p>
            <p ng-message="maxlength">not a valid field. Length exceeds.</p>
            <p ng-message="minlength">not a valid field. Length is shorter.</p>
</div>

le type de bouton devrait être submit et cela fonctionnera.

1
MaazKhan47

Je me débattais avec ceci et ce qui se passait était que mes messages ng n'apparaissaient pas car le comportement par défaut du navigateur n'autorisait pas la soumission de formulaire non valide avec ng-required = "true". Pour résoudre ce problème, vous pouvez décorer le formulaire avec novalidate. Voici l'exemple de travail complet pour moi:

<form name="myForm" novalidate ng-submit="myForm.$valid && controllSideSubmitHandle()">
  <input type="text" name="name" ng-model="myScope.name" ng-required="true">
  <div ng-messages="myForm.$error || myForm.$submitted" style="color:maroon" role="alert" ng-if="myForm.name.$dirty || myForm.$submitted">
    <div ng-message="required">Name is required.</div>
  </div>
  <input type="submit" value="Submit"/>
</form>
1
edencorbin

Si vous utilisez du matériel AngularJS, une grande partie de cette fonctionnalité sort de la boîte! N'oubliez pas de tout mettre dans un <md-input-container>.

Voici un exemple de code afin que vous puissiez voir à quoi ça ressemble. Cela cache non seulement l'erreur avant que l'utilisateur ne clique sur l'entrée, mais ajoute un joli style rouge et une animation pour son affichage!

Voici le code actuel:

  <form name="books" novalidate>
    <md-input-container>
      <input ng-model="title" name="title" required/>
      <div ng-messages="books.title.$error">
        <div ng-message="required">Title is required</div>
      </div>
    </md-input-container>
  </form>
1
hubatish

J'ai résolu ce problème avec une règle CSS

[ng-messages] { display: none; color:red; } 
.ng-dirty [ng-messages] { display:block }

C'est ça..

Fonctionne comme un charme pour moi.

Voici un plunker

L'utilisation des cours par Angular est incroyable, vous pouvez faire tellement de choses avec!

1
guy mograbi