Angulaire de Validation NG-ne pas afficher de message requis après la soumission, et de supprimer le texte

C'est mon actuel de validation mis en place pour mon formulaire de

<ng-messages for="searchForm.$error" ng-if="searchForm.$submitted">
  <ng-message when="required" class="error-message">This search field is required.</ng-message>
</ng-messages>

et ma forme

<form role="form" ng-submit="searchForm.$valid && searchcode()" name="searchForm" novalidate>

Il fonctionne très bien.

Mais voilà ce que je n'aime pas ce scénario

1), appuyez sur Entrée sur vide "searchbox" - > on affiche le message "Champ Obligatoire"

2) Commencez à Taper et Effacer le Texte sans avoir à appuyer sur la touche enter - > message d'erreur s'affiche de nouveau

C'est le deuxième scénario, je ne veux pas...des idées ?

pourquoi êtes-vous à l'aide de searchForm.searchQuery.$touched? cela pourrait être la raison pour laquelle vous êtes l'obtention de ce comportement. essayez d'utiliser seulement searchForm.$submitted
Débarrasser d'elle et juste eu soumise, mais même comportement...il semble qu'après la première soumettre le formulaire de séjours dans les "Soumis" de l'état, et que le message d'erreur montre à chaque fois que la zone de texte est vide, c'est plutôt lorsqu'il est soumis de nouveau
Ce post pourrait vous aider.
Également un charme de démonstration pourrait l'aider.
Je pense aussi, que si vous remplacez le $a touché une partie de la ng-si $vierges. Assurez-vous de définir le formulaire avec $setPristine après la soumission du formulaire.

OriginalL'auteur StevieB | 2014-12-05

  1. 6

    Peut-être votre nom de champ pour le message d'erreur n'est pas droit.
    Impossible de dire la raison exacte pour laquelle le vôtre fonctionne pas parce que vous n'avez pas de fournir un exemple.
    Cependant, quand je l'ai testé, il fonctionne très bien. 

     <form ng-controller="MyCtrl" role="form" name="searchForm" novalidate
    ng-submit="searchcode()">
    <input type="text" ng-model="field" name="myField" 
      ng-keypress="searchForm.$submitted=false"
      required minlength="5" />
    <ng-messages ng-if="searchForm.$submitted"
      for="searchForm.myField.$error">
      <ng-message when="required" class="error-message">
        This search field is required.
      </ng-message>
    </ng-messages>
  </form>

    http://plnkr.co/edit/56koY7YxPDVFe4S26x9N?p=preview

    La même chose se passe sur le vôtre. Si vous appuyez sur entrée sans texte et le message affiche c'est à dire "Entrez Champ Obligatoire" puis il suffit de taper quelque chose et effacer le texte dans le champ de texte et le message d'erreur s'affiche de nouveau sans avoir conclu soumettre
    Oh, vous souhaitez afficher le message d'erreur uniquement si le bouton envoyer est pressé? Ensuite, il suffit d'ajouter ng-keypress="searchForm.$submitted=false" dans le champ de saisie bien que c'est pas le meilleur. J'ai modifié le plnkr.
    Souhaitez uniquement afficher un message si la zone de texte est vide et le bouton "soumettre" est pressé
    Maintenant, il semble pour afficher le message d'erreur sur toutes les soumettre, même s'il existe une valeur
    Commentaire simplement //$scope.field=""; dans searchcode() fonction. Pour les avancés de contrôle de la clé, vous pouvez regarder dans l'utilisation ng-keyup. Je dois vous dire que vous pouvez le faire fonctionner, si vous continuez à demander, mais je ne vois pas, c'est le meilleur. Le mieux je pense est when you want to show message based on submit, the message better to be from server-side bien que vous pouvez être en désaccord.

    OriginalL'auteur allenhwkim

  2. 0

    Vous pouvez écrire votre propre programme de validation, puis utiliser une instruction if pour décider ce que pour valider. Depuis, par exemple, vous ne voulez pas y être tout de validation fait quand une personne est en train d'effacer des caractères, vous pouvez écrire le programme de validation de sorte qu'il prend un événement et vous pouvez obtenir le char code de la touche qui a déclenché l'événement, en optant de ne pas valider que char code représente la touche retour arrière ou suppr.

    OriginalL'auteur RadleyMith

  3. 0

    Je vais le faire d'une manière différente. Espérons que cela aide. Il va afficher les messages si le formulaire n'est pas valide et sale. Lorsque l'utilisateur soumet, réinitialiser le formulaire en paramètre d'être vierge. Avec cela, vous pouvez réinitialiser $champ d'application.champ vide et ne montrant pas de messages d'erreur. 

    <form ng-controller="MyCtrl" role="form" name="searchForm" novalidate ng-submit="searchcode()">
   <input type="text" ng-model="field" name="myField" required minlength="5" />
   <p class="error-message" ng-show="!searchForm.$valid && searchForm.$dirty">
     This search field is required.
   </p> 
   <ul>
      <li>$submitted : {{searchForm.$submitted}}
      <li>$valid: {{searchForm.$valid}}
      <li>$dirty:  {{searchForm.$dirty}} 
   </ul>
</form>

    Sur submit, reset de la forme en la plaçant à être vierge. 

    $scope.searchcode = function() {
    $scope.searchForm.$setPristine();
    $scope.field="";
    console.log('submitted');
  }

    http://plnkr.co/edit/m0cCmOAtY2J8fhSv0DVg?p=preview

    OriginalL'auteur geckob