Validation du déclencheur de tous les champs dans le formulaire angular

Ce qui a fonctionné pour moi a été d’utiliser la fonction $setSubmitted , qui apparaît d’abord dans les documents angulars de la version 1.3.20.

Dans l’événement click où je voulais déclencher la validation, j’ai fait ce qui suit:

 vm.sortingggerSubmit = function() { vm.homeForm.$setSubmitted(); ... } 

C’était tout ce qu’il fallait pour moi. Selon les documents, il “définit le formulaire à son état soumis”. C’est mentionné ici .

Je sais, il est un peu trop tard pour répondre, mais tout ce que vous avez à faire est de forcer toutes les formes à se salir. Jetez un coup d’oeil à l’extrait suivant:

 angular.forEach($scope.myForm.$error.required, function(field) { field.$setDirty(); }); 

et ensuite vous pouvez vérifier si votre formulaire est valide en utilisant:

 if($scope.myForm.$valid) { //Do something } 

et enfin, je suppose, vous voudriez changer votre itinéraire si tout semble bon:

 $location.path('/somePath'); 

Edit : le formulaire ne s’enregistrera pas sur la scope tant que l’événement d’envoi n’est pas un déclencheur. Utilisez simplement la directive ng-submit pour appeler une fonction et placez-la dans cette fonction, et cela devrait fonctionner.

Au cas où quelqu’un y reviendrait plus tard … Rien de ce qui précède n’a fonctionné pour moi. J’ai donc creusé dans les entrailles de la validation de forme angular et trouvé la fonction qu’ils appellent pour exécuter des validateurs sur un champ donné. Cette propriété s’appelle commodément $validate .

Si vous avez un formulaire nommé myForm , vous pouvez appeler par programme myForm.my_field.$validate() pour exécuter la validation de champ. Par exemple:

Notez que l’appel de $validate a des implications pour votre modèle. À partir des documents angulars de ngModelCtrl. $ Valider:

Exécute chacun des validateurs enregistrés (premiers validateurs synchrones puis validateurs asynchrones). Si la validité devient invalide, le modèle sera défini sur indéfini, à moins que ngModelOptions.allowInvalid soit true. Si la validité passe à valide, le modèle sera défini sur le dernier $ modelValue valide disponible, c’est-à-dire la dernière valeur analysée ou la dernière valeur définie dans l’étendue.

Donc, si vous prévoyez de faire quelque chose avec la valeur de modèle non valide (comme si un message le lui disait), vous devez vous assurer que allowInvalid est défini sur true pour votre modèle.

Vous pouvez utiliser Angular-Validator pour faire ce que vous voulez. C’est simple à utiliser.

Ce sera:

• Validez uniquement les champs sur $dirty ou sur submit
• Empêcher la soumission du formulaire s’il est invalide
• Afficher le message d’erreur personnalisé après que le champ est $dirty ou que le formulaire est soumis

Voir la démo

Exemple

 
  Submit  

Si le champ ne passe pas le validator l’utilisateur ne pourra pas soumettre le formulaire.

Découvrez des exemples d’utilisation de validateurs angulars et des exemples pour plus d’informations.

Disclaimer: Je suis l’auteur de Angular-Validator

Eh bien, la manière angular serait de laisser gérer la validation – car elle le fait à chaque changement de modèle – et ne montrerait le résultat à l’utilisateur que lorsque vous le souhaitez.

Dans ce cas, vous décidez quand afficher les erreurs, il vous suffit de définir un indicateur: http://plnkr.co/edit/0NNCpQKhbLTYMZaxMQ9l?p=preview

Pour autant que je sache, il y a un problème déposé à angular pour nous permettre d’avoir un contrôle de forme plus avancé. Comme il n’est pas résolu, j’utiliserais ceci au lieu de réinventer toutes les méthodes de validation existantes.

edit: Mais si vous insistez sur votre chemin, voici votre violon modifié avec validation avant de le soumettre. http://plnkr.co/edit/Xfr7X6JXPhY9lFL3hnOw?p=preview Le contrôleur diffuse un événement lorsque l’utilisateur clique sur le bouton et la directive effectue la validation.

Une approche consiste à forcer tous les atsortingbuts à être sales. Vous pouvez le faire dans chaque contrôleur, mais cela devient très compliqué. Il serait préférable d’avoir une solution générale.

La manière la plus simple de penser était d’utiliser une directive

• il va gérer l’atsortingbut de soumission de formulaire
• il parcourt tous les champs de forme et marque les champs vierges sales
• il vérifie si le formulaire est valide avant d’appeler la fonction de soumission

Voici la directive

 myModule.directive('submit', function() { return { ressortingct: 'A', link: function(scope, formElement, attrs) { var form; form = scope[attrs.name]; return formElement.bind('submit', function() { angular.forEach(form, function(field, name) { if (typeof name === 'ssortingng' && !name.match('^[\$]')) { if (field.$pristine) { return field.$setViewValue(field.$value); } } }); if (form.$valid) { return scope.$apply(attrs.submit); } }); } }; }); 

Et mettez à jour votre formulaire HTML, par exemple:

devient:

Voir un exemple complet ici: http://plunker.co/edit/QVbisEK2WEbORTAWL7Gu?p=preview

Sur la base de la réponse de Thilak, j’ai pu trouver cette solution …

Étant donné que mes champs de formulaire affichent uniquement des messages de validation si un champ est invalide et a été touché par l’utilisateur, j’ai pu utiliser ce code déclenché par un bouton pour afficher mes champs non valides:

 // Show/sortinggger any validation errors for this step angular.forEach(vm.rfiForm.stepTwo.$error, function(error) { angular.forEach(error, function(field) { field.$setTouched(); }); }); // Prevent user from going to next step if current step is invalid if (!vm.rfiForm.stepTwo.$valid) { isValid = false; } 

  
  Suffix       this field is required   
  

Voici ma fonction globale pour afficher les messages d’erreur du formulaire.

  function show_validation_erros(form_error_object) { angular.forEach(form_error_object, function (objArrayFields, errorName) { angular.forEach(objArrayFields, function (objArrayField, key) { objArrayField.$setDirty(); }); }); }; 

Et dans mes contrôleurs,

 if ($scope.form_add_sale.$invalid) { $scope.global.show_validation_erros($scope.form_add_sale.$error); } 

Pour valider tous les champs de mon formulaire quand je veux, je fais une validation sur chaque champ de contrôles $$ comme ceci:

 angular.forEach($scope.myform.$$controls, function (field) { field.$validate(); }); 

Note: Je sais que c’est un hack, mais c’était utile pour Angular 1.2 et les versions antérieures qui ne fournissaient pas de mécanisme simple.

La validation intervient sur l’événement de modification , de sorte que certaines choses, comme modifier les valeurs par programmation, ne le déclencheront pas. Mais déclencher l’événement de changement déclenchera la validation. Par exemple, avec jQuery:

 $('#formField1, #formField2').sortinggger('change'); 

J’aime cette approche dans la gestion de la validation par clic sur un bouton.

1. Il n’y a pas besoin d’invoquer quoi que ce soit du contrôleur,

2. tout est traité avec une directive.

sur github

Vous pouvez essayer ceci:

 // The controller $scope.submitForm = function(form){ //Force the field validation angular.forEach(form, function(obj){ if(angular.isObject(obj) && angular.isDefined(obj.$setDirty)) { obj.$setDirty(); } }) if (form.$valid){ $scope.myResource.$save(function(data){ //.... }); } } 

  
  
 My field 1   Select One   
 
  
 field2  
 
 
  Send 

J’ai fait quelque chose pour que ça marche.

 
 
 
 
HEADER NAME *
 
 
  
 Header Name is required 
 
 
 Add Header   

Dans votre contrôleur, vous pouvez faire

 addHeader(form, header){ let self = this; form.$submitted = true; ... } 

Vous avez besoin de css aussi;

 .label-color { color: $gray-color; } .has-error { .label-color { color: rgb(221, 25, 29); } .select2-choice.ui-select-match.select2-default { border-color: #e84e40; } } .validation-message { font-size: 0.875em; } .max-width { width: 100%; min-width: 100%; }