AngularJS: listet alle Formularfehler auf

Hintergrund:
Ich arbeite derzeit an einer Anwendung, mit Reitern; und ich möchte die Liste der Felder /Abschnitte, die der überprüfung nicht standhalten, um den Benutzer auf Fehler im rechten tab.

Also habe ich versucht zu nutzen form.$error zu tun; doch bin ich nicht vollständig erhalten, es funktioniert.

Wenn die Validierung Fehler auftreten, innerhalb einer ng-repeat, z.B.:

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

Leere Werte ergeben form.$error mit den folgenden:

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

Auf der anderen Seite, wenn die Validierung Fehler auftreten, die außerhalb dieses ng-repeat:

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

Den form.$error - Objekt enthält die folgenden:

{ "required": [ {} ] }

doch, würde ich erwarten, dass die folgenden:

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

Irgendwelche Ideen auf, warum der name des element fehlt?

Einer Laufenden plunkr können hier gefunden werden:
http://plnkr.co/x6wQMp

Kommentar zu dem Problem

Ich bemerkte dies, den anderen Tag. Es macht keinen Sinn für mich, weil Sie überprüfen können, form.iname.$error und erhalten die richtigen Werte. Was ich am Ende Tat, war die Verwendung von form.$valid zu prüfen, Gültigkeit und aktivieren Sie Schaltfläche Absenden statt. Kommentarautor: Ed Hinchliffe

Hallo Ed, vielen Dank für Ihre Antwort. Ich bin damit einverstanden, aber ich würde sagen, der Benutzer die Kontrolle versagt zu überprüfen. Die form ist innerhalb einer Registerkarten-Ansicht, so dass es leicht ist zu übersehen, dass Sie nicht sparen können, weil es ist ein Fehler bei der überprüfung der im inneren eine Wiederholung in einer Registerkarte, in der Sie sich derzeit nicht anzeigen. (Ich hoffe meine Erklärung war gut genug, um zu Folgen :)) Kommentarautor: michael

Ich Stimme ja, es ist gut um dem Benutzer zu zeigen, was gültig ist und was nicht. Eine Möglichkeit ist, dass Sie Fehler-text in  - tags für alle möglichen Fehler, und verwenden Sie ng-show="form.fieldName.$Fehler.erforderlich", zum Beispiel. Sie könnten dann entweder inline diejenigen, die mit den Eingängen, oder legen Sie Sie in der Nähe der Absenden-Schaltfläche. Es ist definitiv nicht ideal, aber ich Frage mich, ob die unbestückte $error - Wert ist ein Fehler mit der Winkelgeschwindigkeit? Kommentarautor: Ed Hinchliffe

Ich glaube, dass $error gefüllt wird, die Sie nicht nur werfen Sie es aus als JSON schön. Schauen Sie hier: plnkr.co/Bearbeiten/Z47J2W?p=Album Vorhören Der Fehler-Typen können alle Durchlaufen werden. Kommentarautor: c0bra

c0bra: danke, ich werde versuchen zu Folgen, Ihre Lösung, sieht aus wie es tut genau das, was ich brauche. Kommentarautor: michael

InformationsquelleAutor der Frage michael | 2014-03-11

angularjs angularjs-ng-repeat

114

Als @c0bra darauf hingewiesen, in den Kommentaren der form.$error Objekt gefüllt ist, es einfach nicht mag gedumpt als JSON.

Durchlaufen form.$errors und es verschachtelte Objekte erhalten das gewünschte Ergebnis jedoch.
```
<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>
```
Alle der Kredit geht an c0bra.

Weitere option ist, verwenden Sie eine der Lösungen aus diese Frage, um eindeutige Namen zuweisen, die dynamisch erstellte inputs.

InformationsquelleAutor der Antwort Brett DeWoody

Ich habe eine Funktion, die Sie übergeben das Formular zu. Wenn es auf form-Fehler zeigt es Ihnen in der console. Es zeigt die Objekte, so dass Sie sehen können. Ich habe dies in meinem save-Funktion.

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 der Antwort user5045936

Brett DeWoody die Antwort richtig ist. Ich wollte die Logik in meinem controller aber. Also schrieb ich die unten, die auf der Grundlage der Antwort user5045936 gab. Dies kann auch helfen, einige von Euch, die gehen wollen, dass die controller-route. Durch die Art und Weise Im mit der toaster-Richtlinie zu zeigen, dass meine Benutzer die Validierung von Nachrichten.

 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 der Antwort txavier

Wenn Sie geschachtelte Formen, dann findest du das hier hilfreich:

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

InformationsquelleAutor der Antwort vlio20

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.