AngularJS: Gibt es eine Möglichkeit festzustellen, welche Felder ein Formular ungültig machen?

94

Ich habe den folgenden Code in einer AngularJS-Anwendung in einem Controller, der von einer ng-submit-Funktion aufgerufen wird, die zu einem Formular mit Namen gehört profileForm:

$scope.updateProfile = function() {
  if($scope.profileForm.$invalid) { 
    //error handling..
  }
  //etc.
};

Gibt es innerhalb dieser Funktion eine Möglichkeit herauszufinden, welche Felder dazu führen, dass das gesamte Formular als ungültig bezeichnet wird?

GSto
quelle

Antworten:

92

nameDie Validierungsinformationen jeder Eingabe werden als Eigenschaft im formNamen von angezeigt scope.

HTML

<form name="someForm" action="/">
    <input name="username" required />
    <input name="password" type="password" required />
</form>

JS

$scope.someForm.username.$valid
// > false
$scope.someForm.password.$error
// > { required: true }

Die freigelegten Eigenschaften sind $pristine, $dirty, $valid, $invalid, $error.

Wenn Sie die Fehler aus irgendeinem Grund durchlaufen möchten:

$scope.someForm.$error
// > { required: [{$name: "username", $error: true /*...*/},
//                {$name: "password", /*..*/}] }

Jede fehlerhafte Regel wird in $ error angezeigt.

Hier ist ein Plunkr zum Spielen mit http://plnkr.co/edit/zCircDauLfeMcMUSnYaO?p=preview

Umur Kontacı
quelle
5
Warnung an andere, die in meine Falle geraten - Sie müssen das nameAttribut der Eingabe angeben , um es (natürlich) in $ name zu sehen. Die Tatsache, dass AngularJS an eine Modelleigenschaft gebunden wird, ohne dass ein Name erforderlich ist, kann dazu führen, dass es schwierig ist, zu diagnostizieren, welche Eingabe ungültig ist.
Bernhard Hofmann
Der Hinweis, mit dem $ scope-Objekt zu bestimmen, durch welche Felder ein Formular ungültig wird, hat mir geholfen.
Ram
26

Zur Überprüfung, welches Formularfeld ungültig ist

console.log($scope.FORM_NAME.$error.required);

Dadurch wird das Array ungültiger Felder des Formulars ausgegeben

Shivek Parmar
quelle
15

Wenn Sie sehen möchten, welche Felder Ihre Validierung durcheinander bringen und Ihnen jQuery helfen soll, suchen Sie einfach in der Javascript-Konsole nach der Klasse "ng-invalid" .

$('.ng-invalid');

Es werden alle DOM-Elemente aufgelistet, deren Validierung aus irgendeinem Grund fehlgeschlagen ist.

Thassae Santos
quelle
12

Sie können durchlaufen form.$error.pattern.

$scope.updateProfile = function() {
    var error = $scope.profileForm.$error;
    angular.forEach(error.pattern, function(field){
        if(field.$invalid){
            var fieldName = field.$name;
            ....
        }
    });
}
zs2020
quelle
2
Dies funktionierte für mich, außer dass ich anstelle von form. $ Error.pattern form. $ Error.required verwendet habe. Es gibt keine "Muster" -Eigenschaft. Hat sich das geändert oder so?
Anthony
3
@Anthony, die vom Validierungstyp abhängt =) siehe yearofmoo.com/2014/09/…
oCcSking
2

Wenn ein Feld ungültig ist und Sie versuchen, seinen Wert abzurufen, ist dies der Fall undefined.

Nehmen wir an, Sie haben eine Texteingabe angehängt, $scope.mynumdie nur gültig ist, wenn Sie Zahlen eingeben und darauf eingegeben ABChaben.

Wenn Sie versuchen, den Wert von zu erhalten $scope.mynum, wäre es undefined; es würde das nicht zurückgeben ABC.

(Wahrscheinlich wissen Sie das alles, aber trotzdem)

Ich würde also ein Array verwenden, das alle Elemente enthält, die validiert werden müssen und die ich dem Bereich hinzugefügt habe, und einen Filter (z. B. mit underscore.js) verwenden, um zu überprüfen, welche als zurückgegeben werden typeof undefined.

Und das wären die Felder, die den ungültigen Zustand verursachen.

chris-l
quelle
1
Abhängig von der verwendeten Validierung (z. B. benutzerdefinierte Validatoren) ist das Modell möglicherweise nicht immer undefiniert, wenn es ungültig ist.
Stewie
@Stewie Hmm ja, das ist sehr wahr. Ich denke, es funktioniert nicht in jedem Einzelfall. ^ _ ^
Chris-l
2

Ich wollte alle Fehler im Tooltip der deaktivierten Schaltfläche "Speichern" anzeigen, damit der Benutzer weiß, warum deaktiviert ist, anstatt in der langen Form nach oben und unten zu scrollen.

Hinweis: Denken Sie daran, den Feldern in Ihrem Formular eine Namenseigenschaft hinzuzufügen

    if (frm) {
        disable = frm.$invalid;
        if (frm.$invalid && frm.$error && frm.$error.required) {
            frm.$error.required.forEach(function (error) {
                disableArray.push(error.$name + ' is required'); 
            });
        }
    }
    if (disableArray.length > 0) {
        vm.disableMessage = disableArray.toString();
    }
Sebastian Castaldi
quelle
2

Für meine Anwendung zeige ich Fehler wie folgt an:

<ul ng-repeat="errs in myForm.$error">
<li ng-repeat="err in errs">{{err.$name}}</li></ul>

Wenn Sie alles sehen möchten, klicken Sie einfach auf "Err", um Folgendes anzuzeigen:

 "$validators": {},
"$asyncValidators": {},
"$parsers": [],
"$formatters": [],
"$viewChangeListeners": [],
"$untouched": true,
"$touched": false,
"$pristine": true,
"$dirty": false,
"$valid": false,
"$invalid": true,
"$error": { "required": true },
"$name": "errorfieldName",
"$options": {}

Nicht so gut formatiert, aber Sie werden diese Dinge dort sehen ...

vermasselt
quelle
1

Wenn Sie Felder suchen möchten, die das Formular auf der Benutzeroberfläche ohne Programmierung ungültig machen, klicken Sie einfach mit der rechten Maustaste auf inspizieren (öffnen Sie die Entwicklertools in der Elementansicht) und suchen Sie auf dieser Registerkarte mit Strg + f nach ng-invalid. Dann können Sie für jedes Feld, für das Sie eine ng-ungültige Klasse finden, überprüfen, ob dem Feld während der Anforderung kein Wert zugewiesen wurde oder ob andere Regeln verletzt wurden (ungültiges E-Mail-Format, Definition außerhalb des Bereichs / max / min usw.). . Dies ist der einfachste Weg.

Ozanmut
quelle