AngularJS: Existe-t-il un moyen de déterminer quels champs rendent un formulaire invalide?

J'ai le code suivant dans une application AngularJS, à l'intérieur d'un contrôleur, qui est appelé à partir d'une fonction ng-submit, qui appartient à un formulaire avec un nom profileForm:

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

À l'intérieur de cette fonction, y a-t-il un moyen de déterminer quels champs causent l'invalidité du formulaire entier?

Les nameinformations de validation de chaque entrée sont exposées en tant que propriété dans formle nom de 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 }

Les propriétés exposées sont $pristine, $dirty, $valid, $invalid, $error.

Si vous souhaitez parcourir les erreurs pour une raison quelconque:

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

Chaque règle en erreur sera exposée dans $ error.

Voici un plunkr pour jouer avec http://plnkr.co/edit/zCircDauLfeMcMUSnYaO?p=preview

Pour vérifier quel champ du formulaire est invalide

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

cela affichera le tableau des champs invalides du formulaire

Si vous voulez voir quels champs gâchent votre validation et que vous avez jQuery pour vous aider, recherchez simplement la classe "ng-invalid" sur la console javascript.

$('.ng-invalid');

Il listera tous les éléments DOM dont la validation a échoué pour une raison quelconque.

Vous pouvez passer en boucle form.$error.pattern.

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

Lorsqu'un champ n'est pas valide, si vous essayez d'obtenir sa valeur, il le sera undefined.

Disons que vous avez une entrée de texte attachée à $scope.mynumqui n'est valide que lorsque vous tapez des nombres et que vous avez tapé ABCdessus.

Si vous essayez d'obtenir la valeur de $scope.mynum, ce serait undefined; il ne retournerait pas le fichier ABC.

(Vous savez probablement tout cela, mais de toute façon)

Donc, j'utiliserais un tableau contenant tous les éléments nécessitant une validation que j'ai ajoutés à la portée et utiliserais un filtre (avec underscore.js par exemple) pour vérifier lesquels retournent comme typeof undefined.

Et ce seraient les champs provoquant l'état invalide.

Je voulais afficher toutes les erreurs dans l'info-bulle du bouton Enregistrer désactivé, afin que l'utilisateur sache pourquoi est désactivé au lieu de faire défiler le long formulaire.

Remarque: n'oubliez pas d'ajouter la propriété de nom aux champs de votre formulaire

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

Pour mon application, j'affiche une erreur comme celle-ci:

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

si vous voulez tout voir, utilisez simplement 'err' qui affichera quelque chose comme ceci:

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

Pas si bien formaté, mais vous verrez ces choses là-bas ...

Si vous souhaitez trouver des champs qui invalident le formulaire sur l'interface utilisateur sans programmation, cliquez simplement avec le bouton droit sur inspecter (ouvrez les outils de développement dans la vue des éléments), puis recherchez ng-invalid avec ctrl + f dans cet onglet. Ensuite, pour chaque champ pour lequel vous trouvez une classe ng-invalide, vous pouvez vérifier si le champ ne reçoit aucune valeur alors qu'il est requis, ou d'autres règles qu'il peut enfreindre (format d'e-mail invalide, définition hors limites / max / min, etc.) . C'est le moyen le plus simple.