web-dev-qa-db-fra.com

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, Appelé à partir d'une fonction ng-submit, qui appartient à un formulaire dont le nom est profileForm:

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

Dans cette fonction, y a-t-il un moyen de savoir quels champs sont à l'origine de l'invalidité de l'intégralité du formulaire?

validationangularjs
91
GSto

Les informations de validation de chaque entrée name sont exposées en tant que propriété dans le nom form dans 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 voulez parcourir les erreurs pour une raison quelconque:

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

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

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

88
Umur Kontacı

Pour vérifier quel champ de formulaire est invalide 

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

cela produira le tableau de champs non valides du formulaire

25
Shivek Parmar

Si vous voulez voir quels champs gênent votre validation et que jQuery vous aide, il suffit de rechercher le "ng-invalid" class sur la console JavaScript.

$('.ng-invalid');

Il listera tous les éléments du DOM qui ont échoué à la validation pour une raison quelconque.

14
Thassae Santos

Vous pouvez parcourir form.$error.pattern.

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

Quand un champ est invalide, si vous essayez d’obtenir sa valeur, ce sera undefined. 

Disons que vous avez une entrée de texte attachée à $scope.mynum qui est valide uniquement lorsque vous tapez des nombres et que vous avez tapé ABC dessus. 

Si vous essayez d’obtenir la valeur de $scope.mynum, ce serait undefined; il ne renverrait pas la ABC. 

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

J'utiliserais donc un tableau contenant tous les éléments à valider que j'ai ajoutés à la portée et un filtre (avec underscore.js, par exemple) pour vérifier ceux qui retournent sous la forme typeofundefined.

Et ce sont les champs à l'origine de l'état invalide.

2
chris-l

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

Remarque: n'oubliez pas d'ajouter la propriété name 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();
    }
2
Sebastian Castaldi

Pour mon application, l'erreur d'affichage est la suivante:

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

si vous voulez tout voir, il suffit à l'utilisateur 'err' d'afficher 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à ...

1
messed-up

Si vous voulez trouver un ou des champs qui invalident le formulaire sur l'interface utilisateur sans programme, cliquez simplement sur inspecter (outils de développement ouverts dans la vue des éléments), puis recherchez ng-invalid avec ctrl + f dans cet onglet. Ensuite, pour chaque champ pour lequel vous trouvez la classe ng-invalid, vous pouvez vérifier si aucune valeur n'est attribuée à ce champ ou quelles règles peuvent être enfreintes (format de courrier électronique non valide, définition hors limites/max/min, etc.) . C'est le moyen le plus simple.

1
ozanmut