📄️ Introduction
Dans ce niveau
📄️ 17-1 Base du formulaire de création
Commençons par le formulaire permettant de créer un nouveau projet. Nous avons déjà un composant appelé ProjetCreer que nous allons utiliser pour y insérer le formulaire.
📄️ 17-2 Lien entre la logique (code) et le gabarit (template)
Il n'y a pas de lien pour l'instant entre la logique du composant (la classe et son code) et le gabarit (template/HTML).
📄️ 17-3 Lire les données du formulaire
Vous avez lié l'action soumettre du formulaire à une fonction soumettre() et lié les propriétés du FormGroup aux différents champs dans le gabarit HTML.
📄️ 17-4 Validations
On peut créer un formulaire, renseigner les champs, le soumettre et lire les données, mais un formulaire vient généralement avec des validations. En effet, avant de créer un projet, on veut s'assurer qu'il a au minimum un nom et une description.
📄️ 17-5 Utilisation du FormBuilder
Pour simplifier la création de formulaires, Angular propose le FormBuilder qui permets de réduire la quantité de code à écrire et d'instances de FormControl à créer manuellement.
📄️ 17-6 Conversion formulaire -> Modèle
Il est maintenant temps de soumettre le formulaire!
📄️ 17-7 Fonction creer() de ProjetService
Il nous faudra faire une requête d'API de type POST pour créer une nouvelle entrée dans Supabase.
📄️ 17-8 Traiter l'envoi du formulaire
On peut finalement traiter l'envoi du formulaire! En effet, nous avons été en mesure de convertir le formulaire en un modèle Projet et le service ProjetService a maintenant une fonction creer() permettant de faire une requête de création vers Supabase.
📄️ 17-9 Redirection manuelle
Une fois la requête complétée, il serait bien de retourner à la page de liste des projets. En fait, on veut simplement quitter la page du formulaire puisque le projet a été créé.