Préparation du formulaire côté TypeScript
Objectifs
Comprendre et apprendre à utiliser le module Reactive Forms d'Angular pour créer des formulaires dynamiques et validés côté client.
Résumé
Découvrez comment initier et gérer des formulaires avec Angular en utilisant le module Reactive Forms.
Description
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.
Questions fréquentes
Programme détaillé
Module 1 - Débuter avec ionic
Module 2 - Éléments de base d’un projet Ionic
Module 3 - Découverte des composants Ionic
Module 4 - Changer le thème de l’application
Module 5 - Encore plus de composants
Module 6 - Lancer l’application sur un smartphone Android
Module 7 - Utiliser les fonctionnalités natives du téléphone
Module 8 - Générer un APK exécutable pour Android
