Comment créer des directives basées sur des formulaires dans AngularJS

Points de base

• Créer des composants de forme réutilisables à l'aide des directives AngularJS.
• Implémentez les méthodes de vérification personnalisées dans les directives pour gérer la vérification complexe des entrées, garantissant l'intégrité des données avant d'être soumise au serveur.
• Utilisez des technologies de vérification de formulaire intégrées angularjs (telles que ng-required et ng-pattern) pour établir rapidement la vérification de l'entrée du client.
• Utiliser FormController dans AngularJS pour gérer l'état et la vérification du formulaire pour fournir aux utilisateurs des commentaires instantanés et améliorer l'expérience utilisateur.
• Utilisez la directive ng-submit pour gérer les soumissions de formulaire dans AngularJS, bloquer le comportement de soumission par défaut et activer la logique de vérification personnalisée avant d'envoyer des données au serveur.

De nombreux développeurs sont confrontés à des défis uniques lors de l'exécution de contraintes commerciales complexes sur les données soumises par l'utilisateur. Récemment, mon équipe a fait face à ce défi lorsque j'écrivais une demande sur Giftcards.com. Nous devons trouver un moyen de permettre à nos clients de modifier plusieurs produits en une seule vue, chacun avec ses propres règles de vérification uniques.

Cela se révèle difficile car il nous oblige à utiliser plusieurs balises <form></form> dans le code source HTML et à maintenir un modèle de validation pour chaque instance de formulaire. Avant de trouver la solution, nous avons essayé de nombreuses méthodes, telles que l'utilisation de ngRepeat pour afficher des sous-formulaires. Enfin, nous créons une directive pour chaque type de produit (chaque directive a un <form></form> dans sa vue) et nous lions la directive à son contrôleur parent. Cela nous permet de tirer parti de l'héritage de la forme parentale d'Angular pour garantir que le formulaire parent n'est valide que si toutes les formes enfants sont valides. Dans ce didacticiel, nous créerons un écran de revue de produit simple (en survivant les composants clés de notre application actuelle). Nous aurons deux produits, chacun avec ses propres instructions et chaque produit a des règles de vérification uniques. Il y aura un simple bouton de paiement, qui garantira que les deux formulaires seront valides.

Si vous êtes impatient de voir comment cela fonctionne réellement, vous pouvez sauter directement à notre démo ou télécharger le code à partir de notre référentiel GitHub.

à propos de la commande

La directive

est un morceau de code HTML qui traverse le compilateur HTML d'AngularJS ($compile) et est attaché au DOM. Le compilateur est responsable de la traversée du DOM et de la recherche de composants qu'il peut convertir en objets à l'aide d'autres directives enregistrées. Les directives travaillent dans une portée isolée et maintiennent leurs propres opinions. Ce sont des outils puissants qui facilitent les composants réutilisables qui peuvent être partagés tout au long de l'application. Pour une revue rapide, consultez cet article ou la documentation AngularJS.

La directive

résout notre problème fondamental de deux manières: Premièrement, chaque instance a une portée isolée; deuxièmement, la directive est passé en utilisant le compilateur, qui utilise la directive angulaire ngForm pour reconnaître l'élément de forme. Cette directive intégrée permet à plusieurs éléments de formulaire imbriqués d'accepter un attribut name facultatif à instanciate FormController et renverra l'objet formulaire.

À propos de Form Controller

Lorsque le compilateur reconnaît n'importe quel objet de forme dans le DOM, il instanciera un objet ngForm à l'aide de la directive FormController. Ce contrôleur analysera tous les éléments de la zone d'entrée, de sélection et de texte et créera des contrôles correspondants. Le contrôle nécessite une propriété modèle pour configurer la liaison des données bidirectionnelle et permet une rétroaction instantanée des utilisateurs via diverses méthodes de vérification prédéfinies. Fournissez des commentaires instantanés aux consommateurs, ce qui leur permet de savoir quelles informations sont valides avant de faire des demandes HTTP.

Méthode de vérification pré-construite

Packages angulaires 14 Méthodes de vérification standard. Ceux-ci incluent min, max, required et d'autres validateurs. Ils sont conçus pour comprendre et manipuler presque tous les types d'entrée HTML5 et sont compatibles avec les navigateurs.

<code class="language-html"><input type="text" ng-model="size" ng-required="true" novalidate>
  <span ng-show="myForm.size.$error.required">
    Size:
    The value is required!
  </span></code>

L'exemple ci-dessus montre comment utiliser le validateur de directive ngRequired en angulaire. Cette vérification garantit que le champ est rempli avant d'être considéré comme valide. Il ne vérifie aucune donnée, il fait simplement entrer à l'utilisateur. Avoir l'attribut novalidate signifie que le navigateur ne doit pas vérifier lors de la soumission.

propice pro: ne définissez pas les attributs action sur une forme angulaire. Cela empêchera Angular d'essayer de s'assurer que le formulaire n'est pas soumis de manière aller-retour.

Méthode de vérification personnalisée

Angular fournit une API étendue pour aider à créer des règles de validation personnalisées. Avec cette API, vous pouvez créer et étendre vos propres règles de validation pour des entrées complexes non couvertes dans la validation standard. Mon équipe s'appuie sur certaines méthodes de validation personnalisées pour exécuter les modèles d'expression réguliers complexes que notre serveur utilise. Sans la possibilité d'exécuter un correspondant d'expression régulière complexe, nous pouvons envoyer des données incorrectes au serveur backend. Cela montrera des erreurs à l'utilisateur, ce qui entraînera une mauvaise expérience utilisateur. Les validateurs personnalisés utilisent la syntaxe directive et doivent être injectés ngModel. Plus d'informations peuvent être trouvées en consultant la documentation AngularJS.

Créez le contrôleur

Maintenant, nous pouvons démarrer notre application. Vous pouvez trouver un aperçu du code du contrôleur ici.

Le contrôleur sera au cœur des choses. Il n'a que quelques responsabilités - sa vue aura un élément de formulaire nommé parentForm, il n'a qu'un seul attribut, et ses méthodes incluront registerFormScope, validateChildForm et checkout.

Propriétés du contrôleur

Nous avons besoin d'une propriété dans le contrôleur:

<code class="language-html"><input type="text" ng-model="size" ng-required="true" novalidate>
  <span ng-show="myForm.size.$error.required">
    Size:
    The value is required!
  </span></code>

Cette propriété est utilisée pour maintenir l'état booléen de la validité globale du formulaire. Nous utilisons cette propriété pour désactiver son statut après avoir cliqué sur le bouton de paiement.

Méthode: registerformScope

<code class="language-javascript">$scope.formsValid = false;</code>

Lorsque

est appelé, un registerFormScope et un ID de directif unique créé dans l'instanciation d'instructions y sont transmis. Cette méthode ajoute ensuite la portée du formulaire au parent FormController. FormController

Méthode: validatechildform

Cette méthode sera utilisée pour se coordonner avec le serveur backend qui effectue la vérification. Il est appelé lorsque l'utilisateur modifie le contenu et a besoin d'une vérification supplémentaire. Conceptuellement, nous n'autorisons pas les instructions pour effectuer une communication externe.

Veuillez noter que aux fins de ce tutoriel, j'ai omis les composants backend. Au lieu de cela, je rejette ou analyse les promesses selon que le montant saisi par l'utilisateur se situe dans une plage spécifique (le produit A est 10-50 et le produit B est de 25 à 500).

<code class="language-javascript">$scope.registerFormScope = function (form, id) {
  $scope.parentForm['childForm'+id] = form;
};</code>

L'utilisation du service

permet aux instructions de se conformer aux interfaces avec le succès et le statut de défaillance. La nature de l'interface d'application entre "Modifier" et "Save" dépend de l'édition des données du modèle. Il convient de noter que les données du modèle sont mises à jour immédiatement lorsque l'utilisateur commence à taper. $q

Méthode: Checkout

Cliquez sur "Découvrez" pour indiquer que l'utilisateur a terminé l'édition et souhaite la vérifier. Cet élément exploitable nécessite une vérification que tous les formulaires chargés dans la directive sont validés avant que les données du modèle puissent être envoyées au serveur. La portée de cet article n'inclut pas les méthodes d'envoi de données à un serveur. Je vous encourage à explorer en utilisant le service

pour toute la communication client-serveur. $http

<code class="language-javascript">$scope.validateChildForm = function (form, data, product) {
  // 重置表单，使其不再有效
  $scope.formsValid = false;
  var deferred = $q.defer();

  // 验证表单和数据的逻辑
  // 必须在promise上返回resolve()或reject()。
  $timeout(function () {
    if (angular.isUndefined(data.amount)) {
      return deferred.reject(['amount']);
    }

    if ((data.amount < product.minAmount) || (data.amount > product.maxAmount)) {
      return deferred.reject(['amount']);
    }

    deferred.resolve();
  });
  return deferred.promise;
}</code>

Cette méthode utilise la capacité d'Angular et les formulaires enfants peuvent invalider le formulaire parent. La forme parent est nommée

pour illustrer clairement sa relation avec la forme enfant. Lorsque le formulaire de l'enfant utilise sa méthode parentForm, il se réunira automatiquement vers le formulaire parent pour y régler la validité. Toutes les formes dans $setValidity doivent être valides et leurs attributs internes parentForm doivent être vrais. $valid

Créez notre directive

Nos instructions doivent suivre une interface commune qui permet une interopérabilité complète et une évolutivité. Le nom de nos directives dépend du produit qu'ils contiennent.

Vous pouvez trouver un aperçu du code d'instructions ici (produit A) et ici (produit B).

Portée de l'instruction d'isolement

Chaque directive instanciée obtiendra une portée isolée qui est localisée dans la directive et ne possède aucune propriété externe connue. Cependant, AngularJS permet la création de directives qui utilisent des méthodes et des propriétés de portée des parents. Lorsque vous passez des propriétés externes à la portée locale, vous pouvez indiquer que vous souhaitez configurer une liaison de données bidirectionnelle.

Notre application nécessitera certaines méthodes et propriétés de liaison des données bidirectionnelles externes:

<code class="language-javascript">$scope.checkout = function () {
  if($scope.parentForm.$valid) {
    // 连接服务器以发布数据
  }
  $scope.formsValid = $scope.parentForm.$valid;
};</code>

Méthode: registerformScope

La première propriété de la portée locale de directive est la méthode pour enregistrer la portée locale.form au contrôleur. L'instruction nécessite un pipeline pour passer l'objet

local au contrôleur principal. FormController

Objet: GiftData

Il s'agit des données de modèle centralisées qui seront utilisées dans la vue d'enseignement. Ces informations seront la liaison des données bidirectionnelles pour garantir que les mises à jour survenant dans FormController se propageront au contrôleur principal.

Méthode: validatechildform

Cette méthode est la même que celle définie dans le contrôleur. Cette méthode est appelée lorsque l'utilisateur met à jour les informations dans la vue d'instructions.

objet: produit

Cet objet contient des informations sur le produit acheté. Notre démonstration utilise un objet relativement petit avec seulement quelques propriétés. L'application réelle de mon équipe a beaucoup d'informations pour prendre des décisions dans l'application. Il est transmis dans validateChildForm pour fournir le contexte du contenu vérifié.

lien d'instructions

Notre directive utilisera la fonction postLink et la transmet un objet de portée. De plus, la fonction postLink accepte également plusieurs autres paramètres. Ils sont les suivants:

1. scope - Utilisé pour accéder à la portée d'isolement créée pour chaque instance de directive.
2. iElement - Utilisé pour accéder aux éléments des éléments. Il est sûr de mettre à jour et de modifier l'élément de la fonction postLink dans l'élément auquel il est alloué.
3. iAttrs - Utilisé pour accéder aux propriétés sur la même balise de la directive d'instanciation.
4. controller - Si une dépendance externe du contrôleur existe, elle peut être utilisée dans une fonction de liaison. Ceux-ci doivent correspondre à l'attribut require de l'objet directif.
5. transcludeFn - Cette fonction est la même que la fonction répertoriée dans le paramètre $transclude de l'objet d'instruction.

link Responsable de la connexion de tous les auditeurs DOM et de la mise à jour du DOM avec des éléments de vue.

<code class="language-html"><input type="text" ng-model="size" ng-required="true" novalidate>
  <span ng-show="myForm.size.$error.required">
    Size:
    The value is required!
  </span></code>

Enregistrer la portée du formulaire

<code class="language-javascript">$scope.formsValid = false;</code>

Méthode d'enveloppement registerFormScope Dans $timeout retardera son exécution jusqu'à la fin de la pile d'exécution. Cela offre au compilateur suffisamment de temps pour compléter tous les liens nécessaires entre le contrôleur et les instructions. scope.form.fields est un tableau, le nom de la propriété trouvée dans FormController, qui est très important pour configurer les erreurs de vérification côté serveur. Le but de registerFormScope est d'envoyer FormController au contrôleur parent, permettant à la forme nouvellement créée d'être définie sur une forme enfant de parentForm.

Lorsque les informations de vérification changent

<code class="language-javascript">$scope.registerFormScope = function (form, id) {
  $scope.parentForm['childForm'+id] = form;
};</code>

Lorsque le formulaire change et que l'utilisateur est prêt à le vérifier, la méthode saveForm dans la directive est appelée. Cette méthode invoquera à son tour la méthode validateChildForm du contrôleur et passera dans FormController, scope.giftData et scope.product. Le contrôleur renvoie une promesse qui sera analysée ou rejetée en fonction d'autres règles de validation.

Lorsque la promesse est rejetée, le contrôleur renverra un champ non valide. Ceci est utilisé pour invalider le formulaire (et parentForm) et définir d'autres erreurs de niveau de champ. Dans notre démo, nous utilisons une post-vérification simple sur le champ amount et nous ne renvoyons pas la cause de l'échec. Les refus de validateChildForm peuvent être aussi complexes ou simples que votre application en a besoin.

Lorsque la promesse revient avec succès, la commande doit définir la validité des champs sous la forme. Le code doit également effacer toutes les erreurs de serveur précédemment identifiées. Cela garantit que la directive ne fournit pas d'erreurs à l'utilisateur incorrectement. La définition de tous les champs avec $setValidity sera liée à parentForm dans le contrôleur pour définir leur validité, à condition que toutes les sous-formulaires soient valides.

Définissez notre vue

La vue n'est pas très compliquée, et pour notre démonstration, nous avons simplifié le produit aux champs suivants: nom et montant. Dans la prochaine étape, nous explorerons les vues dont vous avez besoin pour remplir cette application.

Vous pouvez trouver un aperçu du code de vue ici (produit A) et ici (produit B).

Vue d'itinéraire

<code class="language-html"><input type="text" ng-model="size" ng-required="true" novalidate>
  <span ng-show="myForm.size.$error.required">
    Size:
    The value is required!
  </span></code>

Cette vue est importante car elle configure le formulaire parent, qui sera utilisé pour envelopper toutes les formulaires enfants chargés à partir de la directive de produit. L'utilisation de ng-repeat dans ng-if garantit que le DOM n'est pas incorrectement rempli d'un FormController inutilisé.

Vue d'instructions

<code class="language-javascript">$scope.formsValid = false;</code>

Remarque: La vue ci-dessus sur la disposition de la démonstration a été tronquée à certains endroits et n'a rien à voir avec cet article.

Le ci-dessus amountInput définit un mode de vérification qui sera appliqué par le validateur ngPattern d'Angular. Le champ ci-dessus utilisera la directive ngDisabled construite par Angular, qui évalue l'expression, et si elle est vraie, le champ sera désactivé.

En bas de la vue, nous affichons toutes les erreurs pour fournir des commentaires à l'utilisateur lorsque l'utilisateur clique sur le bouton "Enregistrer". Cela définira la propriété $submitted sur la sous-forme.

Résumé

Mettez toutes les pièces ensemble et nous nous retrouvons avec les éléments suivants: (le lien de code ou l'extrait de code doit être inséré ici)

Vous pouvez également trouver tout le code sur GitHub.

Conclusion

Mon équipe a beaucoup appris lors de la création de nos dernières applications. Comprendre la relation père-fils nous permet de simplifier notre écran de commentaire. L'utilisation de directives nous permet de développer un formulaire qui peut être utilisé dans n'importe quel contexte et favorise un bon code réutilisable. La directive nous permet également de tester le code unitaire pour s'assurer que notre formulaire fonctionne comme prévu. Notre application est en production et a contribué à plus de 100 000 commandes.

J'espère que vous avez aimé lire cet article. Si vous avez des questions ou des commentaires, j'aimerais les entendre dans les commentaires ci-dessous.

FAQ pour les directives basées sur la forme dans AngularJS

Quel est le rôle des directives basées sur la forme dans AngularJS?

Les directives basées sur des formulaires dans AngularJS jouent un rôle crucial dans la gestion et la validation de la saisie des utilisateurs dans les formulaires. Ils fournissent un moyen de créer des balises HTML personnalisées qui agissent comme de nouveaux widgets personnalisés. Ils peuvent également manipuler les DOM d'une manière qui ajoute des fonctionnalités à nos applications. Ces instructions sont particulièrement utiles lorsque vous souhaitez encapsuler et réutiliser les fonctionnalités communes dans votre application.

Comment créer des directives basées sur des formulaires personnalisées dans AngularJS?

La création d'une directive basée sur des formulaires personnalisée dans AngularJS implique de définir une nouvelle directive à l'aide de la fonction .directive. Vous devez fournir à votre directif un nom et une fonction d'usine qui générera l'objet d'option de la directive. Cet objet peut définir plusieurs propriétés, y compris restrict, template, scope, link, etc. L'option restrict est utilisée pour spécifier comment les directives sont appelées dans HTML.

Comment vérifier l'entrée du formulaire à l'aide de la directive AngularJS?

AngularJS fournit quelques instructions intégrées pour la validation du formulaire, y compris ng-required, ng-pattern, ng-minlength, ng-maxlength, et plus encore. Ces instructions ajoutent de la validation à la saisie de votre formulaire, garantissant que la saisie de l'utilisateur répond à certains critères avant la soumission du formulaire. Vous pouvez également créer des directives de vérification personnalisées pour des exigences de vérification plus complexes.

Quel est le but du contrôleur de formulaire dans AngularJS?

FormController Dans AngularJS fournit des méthodes pour suivre l'état des formulaires et leurs contrôles, la vérification des formulaires de validité et de réinitialisation. Il est automatiquement disponible dans la directive de formulaire et peut être injecté dans le contrôleur, d'autres directives ou services.

Comment utiliser la directive Ng-Sumit dans AngularJS?

La directive

dans AngularJS vous permet de spécifier un comportement personnalisé lors de la soumission d'un formulaire. Au lieu d'écrire du code JavaScript pour gérer l'événement de soumission du formulaire à l'aide de ng-submit. Ceci est particulièrement utile lors de la prévention du comportement de soumission de formulaire par défaut lorsque le formulaire n'est pas valide. ng-submit

Quelle est la différence entre la forme et la forme Ng dans AngularJS?

La principale différence entre

et

dans form dans ng-form est que ng-form peut être imbriqué sous d'autres formes. Cela vous permet de regrouper les entrées pertinentes et de les valider en tant que sous-forme. D'un autre côté, les directives standard form ne soutiennent pas la nidification.

Comment définir la validité d'un champ de forme dans AngularJS?

Vous pouvez définir la validité des champs de formulaire dans AngularJS en utilisant la méthode ngModelController fournie par $setValidity. Cette méthode accepte deux paramètres: la clé de validation et la valeur booléenne. Si la valeur booléenne est fausse, la clé est ajoutée à l'objet $error du champ.

Comment utiliser la directive Ng-Model sous forme angularjs?

La directive ng-model dans AngularJS lie l'entrée, la sélection, la zone de texte ou le contrôle de formulaire personnalisé aux propriétés sur la portée. Il fournit une liaison de données bidirectionnelle entre le modèle et la vue. Cela signifie que toute modification du champ de saisie mettra à jour automatiquement le modèle et vice versa.

Quel est le rôle de la directive de changement NG sous forme angularjs?

La directive

dans AngularJS vous permet de spécifier un comportement personnalisé lorsque l'utilisateur modifie l'entrée. Cette directive est utile lorsque vous souhaitez effectuer quelque chose immédiatement après la fin de la saisie ou de la sélection de l'utilisateur au lieu d'attendre que le formulaire soit soumis. ng-change

Comment créer des directives de vérification personnalisées dans AngularJS?

La création d'une directive de vérification personnalisée dans AngularJS implique de définir une nouvelle directive qui a besoin de

. Dans la fonction ngModel de la directive, vous pouvez utiliser le pipeline link ou ngModelController pour ajouter une logique de validation personnalisée. $validators

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!