CATALOGUE Code & Data Formation Ionic Apprendre Ionic 5

Comment créer un formulaire avec Angular Reactive Forms

Retour à la formation
Chapitre 5 Leçon 7
Précédent
Suivant

Découvrez comment initier et gérer des formulaires avec Angular en utilisant le module Reactive Forms.

Détails de la leçon

Description de la leçon

Comme vous devez vous en douter, dans une page qui s'appelle Créer Annonce, nous allons forcément utiliser des formulaires. Mais avant de s'intéresser à la création de formulaires au niveau de notre vue, on va préparer le formulaire sur notre partie Contrôleur.

Pour créer un formulaire, nous allons utiliser le module Reactive Forms Module d'Angular. Donc, la première étape va être de le déclarer dans le module de la page. Je vais ensuite aller sur mon fichier Créer Annonce page.ts. Je commence par déclarer une variable Form de type FormGroup. Je vais injecter le service FormBuilder qui me permettra de créer mon formulaire. Et je vais initialiser mon formulaire dans la fonction ngOnInit grâce à la fonction FormBuilder.group.

La fonction group va contenir un objet à l'intérieur duquel nous allons déclarer chaque input de ce formulaire, la valeur initiale et les différentes validations. Je commence par le titre. Je veux une valeur initiale qui soit une chaîne vide. Et je vais déclarer dans mon deuxième paramètre un tableau de validation. Je vais utiliser la classe Validators qui inclut dans le Reactive Forms Module. Donc, je veux que mon titre soit requis, qu'il soit obligatoire. Et je veux qu'il ait une taille minimum de 5 caractères, par exemple.

Encore une fois, vous n'êtes pas obligé de faire comme moi. Libre à vous de choisir les validations qui vous intéressent. Je fais la même chose pour la description en indiquant qu'elle est obligatoire. Et je vais également ajouter le reste des éléments. Voilà, j'ai donc créé mon formulaire côté TypeScript. J'ai utilisé des validations très basiques. Dans la majorité des cas, je veux juste que l'utilisateur soit obligé de fournir une information. Encore une fois, à vous de voir si vous voulez créer des validations un peu plus complexes, par exemple pour le numéro de téléphone, pour le nom de l'auteur, avec des expressions régulières, etc. Mais dans le cadre de ce tutoriel, on va rester sur ça. Voilà donc comment préparer notre page à utiliser un formulaire.

Objectifs de cette leçon

Comprendre et apprendre à utiliser le module Reactive Forms d'Angular pour créer des formulaires dynamiques et validés côté client.

Prérequis pour cette leçon

Avoir des connaissances de base en Angular et en TypeScript. Une compréhension des formulaires HTML est également utile.

Métiers concernés

Les compétences acquises sont particulièrement utiles pour les développeurs front-end travaillant sur le développement d'applications web requérant une gestion robuste et dynamique des formulaires.

Alternatives et ressources

Il existe d'autres méthodes comme les formulaires basés sur les template-driven forms ou l'utilisation de bibliothèques tierces spécialisées dans la gestion des formulaires.

Questions & Réponses

Reactive Forms offre une approche programmative et une gestion plus fine des validations et de la logique des formulaires.
On utilise le service FormBuilder avec sa méthode group pour déclarer et initialiser les champs du formulaire.
Les validations dans Reactive Forms sont programmatiques et centralisées, ce qui permet une gestion plus structurée et maintenable des règles de validation.