Share
Ce que vous allez créerIl s’agit de la deuxième partie de la série Introduction aux formes angulaires 4. Dans la première partie, nous avons créé un formulaire à l’aide de l’approche par modèles. Nous avons utilisé des directives telles que ngModel, ngModelGroup et ngForm pour surcharger les éléments de formulaire. Dans ce tutoriel, nous allons adopter une approche différente pour la création de formes: la manière réactive.
Les formulaires réactifs adoptent une approche différente de celle des formulaires basés sur des modèles. Ici, nous créons et initialisons le objets de contrôle de formulaire dans notre classe de composant. Ce sont des objets intermédiaires qui contiennent l'état de la forme. Nous les lierons ensuite au éléments de contrôle de formulaire dans le template.
L'objet de contrôle de formulaire écoute toutes les modifications apportées aux valeurs de contrôle d'entrée et celles-ci sont immédiatement reflétées dans l'état de l'objet. Etant donné que le composant a un accès direct à la structure du modèle de données, toutes les modifications peuvent être synchronisées entre le modèle de données, l'objet de contrôle de formulaire et les valeurs de contrôle d'entrée..
En pratique, si nous construisons un formulaire pour la mise à jour du profil utilisateur, le modèle de données est l'objet utilisateur extrait du serveur. Par convention, cela est souvent stocké dans la propriété utilisateur du composant (this.user). L'objet de contrôle de formulaire ou le modèle de formulaire sera lié aux éléments de contrôle de formulaire réels du modèle..
Ces deux modèles devraient avoir des structures similaires, même s'ils ne sont pas identiques. Cependant, les valeurs en entrée ne doivent pas transiter directement dans le modèle de données. L'image décrit comment l'entrée utilisateur du modèle se dirige vers le modèle de formulaire..
Commençons.
Vous n'avez pas besoin d'avoir suivi la première partie de cette série pour que la deuxième partie ait un sens. Cependant, si vous êtes novice dans Angular, je vous recommande vivement de suivre la stratégie basée sur des modèles. Le code de ce projet est disponible sur mon référentiel GitHub. Assurez-vous que vous êtes sur la bonne branche, puis téléchargez le zip ou, alternativement, clonez le référentiel pour voir le formulaire en action..
Si vous préférez commencer à partir de zéro, assurez-vous d’avoir installé Angular CLI. Utilisez le ng commande pour générer un nouveau projet.
$ ng new SignupFormProject
Ensuite, générez un nouveau composant pour le SignupForm ou en créer un manuellement.
ng générer le composant SignupForm
Remplacer le contenu de app.component.html avec ça:
Voici la structure de répertoire pour le src / annuaire. J'ai supprimé des fichiers non essentiels pour que tout reste simple.
. ├── app │ ├── app.component.css app.component.html app.component.ts app.module.ts le formulaire d'inscription │ ├ ── signup-form.component.css ├── signup-form.component.html ts signup-form.component.ts └── User.ts ├── index.html main .ts ├── polyfills.ts ├── styles.css ├── tsconfig.app.json typings.d.ts
Comme vous pouvez le voir, un répertoire pour le SignupForm composant a été créé automatiquement. C'est là que la plupart de notre code ira. J'ai aussi créé un nouveau User.ts pour stocker notre modèle d'utilisateur.
Avant de plonger dans le modèle de composant réel, nous devons avoir une idée abstraite de ce que nous construisons. Donc, voici la structure de forme que j'ai dans mon esprit. Le formulaire d'inscription comportera plusieurs champs de saisie, un élément de sélection et un élément de case à cocher..
Voici le modèle HTML que nous allons utiliser pour notre page d'inscription.
Les classes CSS utilisées dans le modèle HTML font partie de la bibliothèque Bootstrap utilisée pour rendre les choses jolies. Comme il ne s’agit pas d’un tutoriel de conception, je ne parlerai pas beaucoup des aspects CSS du formulaire sauf si nécessaire.
Pour créer un formulaire réactif, vous devez importer le ReactiveFormsModule de @ angulaire / formes et l'ajouter au tableau des importations dans app.module.ts.
// Importer ReactiveFormsModule import ReactiveFormsModule depuis '@ angular / forms'; @NgModule (… // Ajoute le module aux importations Importations de tableaux: [BrowserModule, ReactiveFormsModule…). Classe d'exportation AppModule .
Ensuite, créez un modèle d’utilisateur pour le formulaire d’inscription. Nous pouvons utiliser une classe ou une interface pour créer le modèle. Pour ce tutoriel, je vais exporter une classe avec les propriétés suivantes.
classe d'exportation User id: number; email: chaîne; // Les deux mots de passe sont dans un seul objet mot de passe: pwd: string; confirmPwd: string; ; sexe: chaîne; termes: booléen; constructeur (valeurs: Object = ) // Initialisation du constructeur Object.assign (this, values);
Maintenant, créez une instance du modèle User dans le dossier SignupForm composant.
importer Component, OnInit à partir de '@ angular / core'; // Importe le modèle utilisateur import User depuis './… / User'; @Component (sélecteur: 'app-signup-form', templateUrl: './signup-form.component.html', styleUrls: ['./signup-form.component.css']) La classe d'exportation SignupFormComponent implémente OnInit // Liste de genre pour l'élément de contrôle select privé genderList: string []; // Propriété pour l'utilisateur utilisateur privé: User; ngOnInit () this.genderList = ['Homme', 'Femme', 'Autres'];
Pour le signup-form.component.html fichier, je vais utiliser le même modèle HTML discuté ci-dessus, mais avec des modifications mineures. Le formulaire d'inscription comporte un champ de sélection avec une liste d'options. Bien que cela fonctionne, nous le ferons de manière angulaire en parcourant la liste à l’aide des touches ngFor directif.
Remarque: vous pourriez recevoir une erreur disant Aucun fournisseur pour ControlContainer. L'erreur apparaît lorsqu'un composant a une
Nous avons un composant, un modèle et un modèle de formulaire à portée de main. Et maintenant? Il est temps de se salir les mains et de se familiariser avec les API dont vous avez besoin pour créer des formulaires réactifs. Ceci comprend FormControl et FormGroup.
Lors de la création de formulaires avec la stratégie de formulaires réactifs, vous ne rencontrerez pas les directives ngModel et ngForm. Au lieu de cela, nous utilisons les API sous-jacentes FormControl et FormGroup.
Un FormControl est une directive utilisée pour créer une instance de FormControl que vous pouvez utiliser pour garder trace de l'état d'un élément de formulaire particulier et de son statut de validation. Voici comment fonctionne FormControl:
/ * Importer d'abord FormControl * / import FormControl à partir de '@ angular / forms'; / * Exemple de création d'une nouvelle instance de FormControl * / classe d'export SignupFormComponent email = new FormControl ();
email est maintenant une instance de FormControl et vous pouvez la lier à un élément de contrôle d'entrée de votre modèle comme suit:
S'inscrire
L'élément de formulaire de modèle est maintenant lié à l'instance FormControl dans le composant. Cela signifie que toute modification de la valeur de contrôle d'entrée est reflétée à l'autre extrémité..
Un constructeur FormControl accepte trois arguments - une valeur initiale, un tableau de validateurs de synchronisation et un tableau de validateurs asynchrones - et, comme vous l'aurez deviné, ils sont tous facultatifs. Nous allons couvrir les deux premiers arguments ici.
Accentsconagua
import Validators de '@ angular / forms';… / * FormControl avec une valeur initiale et un validateur * / email = new FormControl ('[email protected] ', Validators.required); Angular a un ensemble limité de validateurs intégrés. Les méthodes de validation populaires incluent Validateurs.requis, Validators.minLength, Validators.maxlength, et Validators.pattern. Cependant, pour les utiliser, vous devez d'abord importer l'API Validator..
Pour notre formulaire d'inscription, nous avons plusieurs champs de contrôle de saisie (email et mot de passe), un champ de sélection et un champ de case à cocher. Plutôt que de créer un individu FormControl objets, ne serait-il pas plus logique de regrouper tous ces FormControlest sous une seule entité? Ceci est avantageux car nous pouvons maintenant suivre la valeur et la validité de tous les objets sous-FormControl à un endroit. C'est ce que FormGroup est pour. Nous allons donc enregistrer un groupe de formulaires parent avec plusieurs enfants FormControls.
Pour ajouter un groupe de formulaires, importez-le d'abord. Ensuite, déclarez signupForm en tant que propriété de classe et initialisez-le comme suit:
// Importe l'API pour la construction d'un formulaire import FormControl, FormGroup, Validators from '@ angular / forms'; La classe d'exportation SignupFormComponent implémente OnInit genderList: String []; signupForm: FormGroup;… ngOnInit () this.genderList = ['Homme', 'Femme', 'Autres']; this.signupForm = new FormGroup (email: new FormControl (", Validators.required)), pwd: new FormControl (), confirmPwd: new FormControl (), sexe: nouveau FormControl (), termes: new FormControl ()) Liez le modèle FormGroup au DOM comme suit:
