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

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?

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

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

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.

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;
            ....
        }
    });
}

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.

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();
    }

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

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.