AngularJS: la liste de toutes les erreurs de forme

Arrière-plan:
Je suis actuellement en train de travailler sur une application avec des onglets; et je voudrais la liste des champs /les articles que l'échec de la validation, pour diriger l'utilisateur pour rechercher des erreurs dans l'onglet de droite.

J'ai donc essayé de tirer parti de form.$error de le faire; pourtant, je ne suis pas entièrement le faire fonctionner.

Si la validation des erreurs se produisent à l'intérieur d'un ng-repeat, par exemple:

<div ng-repeat="url in urls" ng-form="form">
  <input name="inumber" required ng-model="url" />
  <br />
</div>

Vide des valeurs form.$error contenant les éléments suivants:

{ "required": [ 
{ 
"inumber": {} 
}, 
{ 
"inumber": {} 
} 
] }

D'autre part, si la validation des erreurs se produisent en dehors de cette ng-repeat:

<input ng-model="name" name="iname" required="true" />

La form.$error objet contient les éléments suivants:

{ "required": [ {} ] }

encore, je préfère attendre le suivant:

{ "required": [ {'iname': {} } ] }

Toutes les idées sur la raison pour laquelle le nom de l'élément est manquant?

L'exécution d'un plunkr peuvent être trouvés ici:
http://plnkr.co/x6wQMp

J'ai remarqué l'autre jour. Il ne fait pas de sens pour moi, parce que vous pouvez inspecter form.iname.$error et obtenir les valeurs correctes. Ce que j'ai fait a l'aide de form.$valid de vérifier la validité et activer le bouton "soumettre" à la place.
Salut Ed, merci beaucoup pour votre réponse. Je suis d'accord, mais je voudrais indiquer à l'utilisateur le contrôle qui est de ne pas valider. Le formulaire est dans un des onglets de la vue, de sorte qu'il est facile d'oublier que vous ne pouvez pas l'enregistrer car il y a une erreur de validation à l'intérieur d'une répétition dans un onglet que vous sont actuellement pas de visualisation. (J'espère que mon explication était assez bon à suivre :))
Ouais je suis d'accord il est bon de montrer à l'utilisateur ce qui est valable et ce qui ne l'est pas. Une option est que vous pouvez avoir le texte de l'erreur dans  balises pour toutes les erreurs possibles et l'utilisation ng-show="form.fieldName.$error.required" par exemple. Vous pouvez ensuite soit inline ceux avec les entrées, ou de les placer près du bouton "soumettre". Ce n'est certainement pas idéal, mais - je me demande si la déserte $error valeur est un bug angulaire?
Je crois $erreur est remplie, vous ne pouvez pas faire un dump comme JSON bien. Jetez un oeil ici: plnkr.co/modifier/Z47J2W?p=preview Les types d'erreurs peuvent tous être réitéré.
c0bra: merci, je vais essayer de suivre votre solution, on dirait qu'il fait exactement ce dont j'ai besoin.
michael: voir ma réponse sur cette question: stackoverflow.com/questions/12044277/... cette méthode permettra d'éviter la répétition de ng-formes d'écraser les uns les autres
vous devez soumettre une réponse complète et nous allons tous les +1

InformationsquelleAutor michael | 2014-03-11

angularjs angularjs-ng-repeat

120

Comme @c0bra souligné dans les commentaires de la form.$error objet est rempli, il n'aime pas être sous-évaluées comme JSON.

Boucle dans form.$errors et il est imbriqué les objets à obtenir le résultat souhaité cependant.
```
<ul>
 <li ng-repeat="(key, errors) in form.$error track by $index"> {{ key }} errors
 <ul>
 <li ng-repeat="e in errors">{{ e.$name }} has an error: {{ key }}.</li>
 </ul>
 </li>
</ul>
```
Tout le crédit va à c0bra sur ce.

Une autre option est d'utiliser une des solutions de cette question pour attribuer des noms uniques pour les de créer dynamiquement des entrées.
- excellente réponse merci.
- wow, ça a sauvé ma journée!
- Remarque: les Étiquettes doivent avoir name attribut pour elle de retourner des noms. Si vous avez tendance à ne pas attribuer des étiquettes de nom, coz angulaire, il sera de retour blancs à e.$name
- Génial!!. Merci beaucoup
InformationsquelleAutor Brett DeWoody

J'ai fait une fonction qui vous transmettre le formulaire. Si il y a des erreurs, il les affiche dans la console. Il montre les objets de sorte que vous pouvez prendre un coup d'oeil. J'ai mis ça dans ma fonction de sauvegarde.

function formErrors(form){
  var errors = [];
  for(var key in form.$error){
    errors.push(key + "=" + form.$error);
  }
  if(errors.length > 0){
    console.log("Form Has Errors");
    console.log(form.$error);
  }
};

InformationsquelleAutor user5045936

Brett DeWoody réponse est bonne. Je voulais faire de la logique dans mon contrôleur de bien. J'ai donc écrit ci-dessous, qui est basé sur la réponse user5045936 a donné. Cela peut aussi aider certains d'entre vous qui veulent aller le contrôleur de route. Par la voie Im en utilisant le grille-pain directive pour montrer à mes utilisateurs de validation des messages.

 if (!vm.myForm.$valid) {
            var errors = [];

            for (var key in vm.myForm.$error) {
                for (var index = 0; index < vm.myForm.$error[key].length; index++) {
                    errors.push(vm.myForm.$error[key][index].$name + ' is required.');
                }
            }

            toaster.pop('warning', 'Information Missing', 'The ' + errors[0]);

            return;
        }

InformationsquelleAutor txavier

Si vous avez des formulaires imbriqués, alors vous trouverez ce utile:

 function touchErrorFields(form) {
    angular.forEach(form.$error, function (field) {
      angular.forEach(field, function(errorField) {
        if (!errorField.hasOwnProperty('$setTouched')) {
          touchErrorFields(errorField);
        } else {
          errorField.$setTouched();
        }
      })
    });
  }

Cette solution est parfaite pour récursivement afficher les erreurs sur imbriqué, merci !
vous êtes les bienvenus! heureux que cela vous a aidé
Avec angularjs 1.6.2, errorField.hasOwnProperty('$setTouched') renvoie la valeur false.

InformationsquelleAutor vlio20

Vous devez vous connecter pour publier un commentaire.