web-dev-qa-db-de.com

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

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

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

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

91
GSto

Die Validierungsinformationen jeder Eingabe name werden als Eigenschaft in forms Name in scope verfügbar gemacht.

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 exponierten Eigenschaften sind $pristine, $dirty, $valid, $invalid, $error.

Wenn Sie die Fehler aus irgendeinem Grund wiederholen 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

88
Umur Kontacı

Um zu überprüfen, welches Formularfeld ungültig ist 

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

dadurch wird das Array ungültiger Felder des Formulars ausgegeben

25
Shivek Parmar

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

$('.ng-invalid');

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

14
Thassae Santos

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

$scope.updateProfile = function() {
    var error = $scope.profileForm.$error;
    angular.forEach(error.pattern, function(field){
        if(field.$invalid){
            var fieldName = field.$name;
            ....
        }
    });
}
12
zsong

Wenn ein Feld ungültig ist und Sie versuchen, seinen Wert abzurufen, ist es undefined

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

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

(Wahrscheinlich wissen Sie das alles, aber trotzdem)

Also würde ich ein Array verwenden, das alle Elemente enthält, die einer Validierung bedürfen, die ich zum Gültigkeitsbereich hinzugefügt habe, und einen Filter (z. B. mit Underscore.js) verwenden, um zu überprüfen, welche als typeofundefined zurückgegeben werden.

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

2
chris-l

Ich wollte alle Fehler in der deaktivierten Schaltfläche "Speichern" anzeigen, damit der Benutzer wissen kann, warum deaktiviert ist, anstatt das lange Formular 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();
    }
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, müssen Sie nur den Benutzer 'err' aufrufen, der etwa Folgendes anzeigt:

 "$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 ...

1
messed-up

Wenn Sie nach Feldern suchen möchten, die das Formular auf der Benutzeroberfläche ohne programmgesteuert ungültig machen, klicken Sie mit der rechten Maustaste auf inspect (Entwicklerwerkzeuge in der Elementansicht öffnen). Suchen Sie dann mit STRG + F auf dieser Registerkarte nach ng-invalid. Dann können Sie für jedes Feld, für das Sie eine nicht gültige Klasse finden, prüfen, ob das Feld keinen erforderlichen Wert enthält, oder ob andere Regeln gelten (ungültiges E-Mail-Format, Definition außerhalb des zulässigen Bereichs/max/min usw.). . Dies ist der einfachste Weg.

1
ozanmut