L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Formes imbriquées dans Angular 6
Guide pas à pas pour l'utilisation de formulaires imbriqués dans la dernière version d'Angular.
Récemment, je travaillais sur un portail qui devait utiliser un tableau dans un tableau. Pour cela, j'ai décidé d'utiliser la structure de formulaire imbriquée, et cela a très bien fonctionné pour moi. J'ai pensé que cela pourrait être utile pour beaucoup d'autres personnes aussi, alors j'ai décidé de partager les formulaires imbriqués car ils peuvent être utilisés dans n'importe quel scénario.
Qu'est-ce qu'un formulaire imbriqué?
En termes simples, les formulaires imbriqués sont formulaires dans un formulaire. À l'aide de formulaires imbriqués, nous pouvons créer un tableau d'objets au sein d'un seul champ et avoir un tableau de ces champs.
Le formulaire imbriqué nous permet donc de gérer de grands groupes de formulaires et de le diviser en petits groupes.
Par exemple:
- Une entreprise décide de créer un formulaire permettant de collecter des données auprès des utilisateurs.
- Les utilisateurs doivent ajouter toutes les villes dans lesquelles ils ont vécu, afin de pouvoir créer un bloc de texte de manière dynamique. chaque ville qu'ils ajoutent.
- Dans les villes, les utilisateurs peuvent avoir plusieurs lignes d'adresse, de sorte qu'ils puissent également ajouter de nouvelles zones de texte pour les lignes d'adresse de manière dynamique.
- Ici, les villes elles-mêmes sont un tableau de formulaire et , dans ce tableau de forme, l'adresse est un tableau de forme imbriqué.
Voyons comment réaliser ce scénario en utilisant Angular 6 .
Nous allons procéder étape par étape et commencer à écrire le code parallèle pour atteindre notre objectif.
Application de démonstration
Pour l’application de démonstration, nous créer des formulaires imbriqués grâce auxquels nous pourrons ajouter de nouvelles villes et, au sein de ces villes, de nouvelles lignes d'adresse.
Donc, en gros, nous allons construire ceci:
Comme vous pouvez le voir ici, après cette affectation, nous pourrons ajouter de manière dynamique des villes et des lignes d’adresses dans une ville. Commençons donc.
Création de formulaires et données par défaut
Tout d’abord, nous déciderons de la structure de notre tableau imbriqué et une fois la structure prête, nous essaierons de définir les données par défaut sous la forme.
Notre structure de tableau ressemble à ceci:
data = {
villes: [
Source link