PC & Mobile

Chargement de formes réactives angulaires – Mike Taylor

Chargement de formes réactives angulaires - Mike Taylor


Chargement de formes réactives angulaires Mike Taylor - Chargement de formes réactives angulaires - Mike Taylor

J’apprends des formes réactives en ce moment, et c’est un bourbier de construction et de mise à jour de choses qui semblaient plus compliquées que jamais. Je construis un outil interne de planification de projet et j’ai besoin d’un formulaire réactif contenant un formGroup contenant deux formArrays imbriqués, et formGroups pour chacun de ces formArrays. J'ai besoin de ces formArrays pour pouvoir ajouter et supprimer des éléments. Je dois également pouvoir charger des formulaires partiellement remplis, car je ne m'attends pas à ce que ces formulaires soient remplis en une seule fois. C’est là que mon problème est entré. Voici comment je l’ai résolu.

Faire. Ne pas. Construire. Votre. Réactif. Formes. Manuellement. Si. Ils. Sont. Compliqué.

Prenons l'exemple ci-dessous - je dois créer une exigence qui a des validateurs (autant que votre cœur le souhaite) - plutôt que de répéter cela encore et encore, écrivez une fonction qui crée votre groupe de formulaires. Cela peut ensuite être réutilisé plus tard. Même pour des formulaires simples, cela vous sera utile pour les définir par programme.

Il s’agit d’un exemple simple, sans validation, et qui est simple, mais il n’est toujours pas facile de charger des données dans le formulaire. Lorsque vous essayez de charger des données dans le formulaire via patchValue () il ne chargera pas tous les éléments du tableau d’exigences, il ne chargera que le premier. Il semble que cela s’explique par le fait que patchValue ne traverse pas la structure et ne produit pas de patchs «profonds». L’exemple simple ci-dessus n’est pas aussi compliqué que mon exemple réel, mais pour des raisons de discussion, utilisons l’exemple ci-dessus avec des validateurs de base et un formulaire comportant un tableau de types formGroups:

Ce que vous remarquerez ci-dessus est que le groupe de formulaire createForm () a un formArray appelé exigences. C’est un tableau dans lequel nous allons insérer formGroups lors du chargement des données. Effectuer cette opération par programme plutôt que manuellement vous aidera lorsque vous souhaitez ajouter de nouveaux éléments d'exigence à formArray.

Lorsque vous utilisez des formulaires réactifs, vous souhaiterez peut-être que ce soit dynamique. Par dynamique, j'entends pouvoir ajouter et supprimer des éléments formArray à volonté. Si vous avez un formulaire réactif complexe, commencez par créer un getter qui vous permettra de référencer plus simplement la partie imbriquée. Voici à quoi ressemble ce getter pour ma fiche ci-dessus:

Cela me permet d'ajouter simplement des fonctions utilitaires à mon composant, comme ceci:

Vous remarquerez que j'utilise getter pour faire référence à formControl pour les exigences formArray. Vous remarquerez également que j’utilise la fonction que j’ai conçue pour créer un groupe formGroup. Cela signifie que l'ajout d'un groupe de formulaires validé à un tableau de types constitue une ligne logique.

Pour un formulaire plat et réactif de base, il est facile de charger des données depuis une autre source. Pour une forme plate, vous pouvez utiliser les fonctions patchValue ou setValue. Je préfère patchValue pour cela, car vous pouvez transmettre des données partielles sous une forme incomplète et cela fonctionne comme vous le souhaitiez, sans réclamation. Cela ressemble à:

MAIS - Lorsque vous essayez ceci pour un formulaire imbriqué, comme celui défini ci-dessous, patchValue ne définira que le premier élément (s'il existe) et le mettra à jour.

Pour que cela fonctionne, vous devez réellement parcourir les données entrantes contenant un tableau et créer des groupes formGroups pour chaque élément du tableau. Une fois que vous avez le groupe form, vous pouvez utiliser patchValue pour renseigner les données dans le groupe formGroup. Enfin, vous devez pousser ce formGroup dans le formArray.

Expliquant simplement ce que nous faisons étape par étape:

  1. Nous prenons notre formData et l’utilisons pour patcher la partie «plate» de notre formulaire qu’il va patcher - il ne mettra pas à jour les éléments du groupe formArray, mais battera individuellement chaque élément formGroup.
  2. Parcourez notre tableau dans nos éléments de données d'entrée qui sont des tableaux - pour chaque élément de ce tableau, nous utilisons notre formGroup défini par programme pour créer un objet.
  3. Mettez à jour cet objet formGroup avec les données de l'exigence actuelle.
  4. Transférez cet objet formGroup mis à jour vers l'objet formArray auquel il appartient.
  5. Répétez le même processus pour toutes les autres parties imbriquées de votre formulaire.

Votre fonction de mise à jour sera aussi simple ou compliquée que votre formulaire - mais si vous avez tout défini par programme, vos fonctions de mise à jour resteront simples et vous permettra de charger formData dans un formulaire plus robuste. De cette façon, vous pouvez tirer parti des formulaires réactifs tout en laissant vos utilisateurs charger leurs formulaires partiellement remplis, sans avoir à tout recommencer!

Show More

SupportIvy

SupportIvy.com : Un lieu pour partager le savoir et mieux comprendre le monde. Meilleure plate-forme de support gratuit pour vous, Documentation &Tutoriels par les experts.

Related Articles

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Close
Close