AngularJS : existe-t-il un moyen de déterminer les champs qui rendent un formulaire invalide ?

Question

J'ai le code suivant dans une application AngularJS, à l'intérieur d'un contrôleur, qui est appelé depuis une fonction ng-submit, qui appartient à un formulaire dont le nom est 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 provoquent l'invalidation de l'ensemble du formulaire ?

Answer 1

Chaque entrée name L'information de validation de l'utilisateur est exposée comme une propriété dans form du nom de l'entreprise 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 itérer sur 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

Answer 2

Pour vérifier quel champ du formulaire est invalide

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

ceci produira le tableau des champs invalides du formulaire

Answer 3

Si vous voulez voir quels sont les champs qui posent problème avec votre validation et que vous disposez de jQuery pour vous aider, il vous suffit de rechercher l'élément suivant "ng-invalid" sur la console javascript.

$('.ng-invalid');

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

Answer 4

Vous pouvez faire une boucle à travers form.$error.pattern .

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

Answer 5

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

Note : n'oubliez pas d'ajouter la propriété du 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();
    }