Angulaire de la validation du formulaire: ng-show, lorsqu'au moins une entrée est ng-invalides et ng-sale

J'ai le formulaire ci-dessous Angulaire partielle:

<form name="submit_entry_form" id="submit_entry_form" ng-submit="submit()" ng-controller="SubmitEntryFormCtrl" novalidate >
    <input type="text" name="first_name" ng-model="first_name" placeholder="First Name" required/><br />
    <input type="text" name="last_name" ng-model="last_name" placeholder="Last Name" required/><br />
    <input type="text" name="email" ng-model="email" placeholder="Email Address" required/><br />
    <input type="text" name="confirm_email" ng-model="confirm_email" placeholder="Confirm Email Address" required/><br />
    <span ng-show="submit_entry_form.$invalid">Error!</span>
    <input type="submit" id="submit" value="Submit" />
</form>

La peine que je vais avoir, c'est l'espace en bas qui dit "Erreur!". Je veux montrer que si l'une des entrées est à la fois "ng-sale" et "ng-invalide". Comme il est ci-dessus, l'erreur s'affiche jusqu'à ce que la forme est tout à fait valable. Le long de la solution serait de faire quelque chose comme:

<span ng-show="submit_entry_form.first_name.$dirty && submit_entry_form.first_name.$invalid || submit_entry_form.last_name.$dirty && submit_entry_form.last_name.$invalid || submit_entry_form.email.$dirty && submit_entry_form.email.$invalid || submit_entry_form.confirm_email.$dirty && submit_entry_form.confirm_email.$invalid">Error!</span>

Ce qui est LAID. Une meilleure façon de faire cela?

OriginalL'auteur crunkchitis | 2013-01-15

  1. 17

    Méthode 1: Utiliser une fonction de $champ d'application défini par votre contrôleur.

    Donc avec une meilleure compréhension de votre problème, vous avez voulu vous montrer un message si tous les champs de votre formulaire a été à la fois $invalide et $sale...

    Ajouter une méthode de contrôleur:

    app.controller('MainCtrl', function($scope) {

  $scope.anyDirtyAndInvalid = function (form){
    for(var prop in form) {
      if(form.hasOwnProperty(prop)) {
         if(form[prop].$dirty && form[prop].$invalid) {
           return true;
         }
      }
    }
    return false;
  };
});

    et dans votre code HTML:

    <span ng-show="anyDirtyAndInvalid(submit_entry_form);">Error!</span>

    Voici une plunker à la démo c'

    Maintenant tout ce qui est dit, si quelqu'un a des données saisies dans un formulaire, et il n'est pas complet, le formulaire lui-même est invalide. Donc, je ne suis pas sûr que c'est la meilleure facilité d'utilisation. Mais il devrait fonctionner.

    Méthode 2: Utilisation d'un Filtre! (recommandé)

    Je propose un filtre pour ce genre de chose...

    Le filtre suivant fait la même chose que ci-dessus, mais c'est mieux de la pratique Angulaire, de l'OMI. Aussi un plunk.

    app.filter('anyInvalidDirtyFields', function () {
  return function(form) {
    for(var prop in form) {
      if(form.hasOwnProperty(prop)) {
        if(form[prop].$invalid && form[prop].$dirty) {
          return true; 
        }
      }
    }
    return false;
  };
});
    <span ng-show="submit_entry_form | anyInvalidDirtyFields">Error!</span>
    Malheureusement cela ne fonctionne pas. Dans le cas que je tape quelque chose dans "prenom" la forme est sale. Cependant, je n'ai pas tapé n'importe quoi dans "last_name" la forme est donc pas valide. Cependant, je veux seulement montrer quand il y a une entrée individuelle qui est à la fois sale et non valides.
    Je vois ce que vous demandez et j'ai mis à jour ma réponse.
    Ouais c'est exactement ce dont je parlais. Je suis juste à s'habituer à Angulaires pour l'instant, mais je vois ce qu'il se passe. Merci homme.
    Excellente solution. Je vais en faire un de la directive ....
    J'utilise un filtre maintenant de faire des choses similaires. J'ai mis à jour la réponse à réfléchir. C'est un peu la "meilleure pratique" sans doute, dans la mesure Angulaire se passe comme il n'est pas couple la logique d'un champ d'application spécifique.

    OriginalL'auteur Ben Lesh