Aller au contenu principal

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.

Injecter ProjetService dans ProjetCreerPage​

Pour utiliser ProjetService dans la composante, on doit l'injecter via le contrôleur.

src/app/features/projets/pages/projet-creer.ts
//...

constructor(private projetService: ProjetService) { }

//...

Effectuer la requête dans la fonction soumettre()​

Vous êtes maintenant prêts à faire une requête en appelant la fonction du service à partir de la fonction soumettre() de la composante!

attention

Vous devrez modifier la fonction soumettre() pour en faire une fonction asynchrone (async).

src/app/features/projets/pages/projet-creer.ts
  protected async soumettre() {
    if(this.projetForm.valid){
      const valeurForm = this.projetForm.value;
      const projetRequete: ProjetCreerRequete = {
        nom: valeurForm.nom!,
        description: valeurForm.description || undefined
      }
      
      const projet = await this.projetService.creer(projetRequete);
    }
  }

Tester dans le navigateur​

Si tout se passe bien, vous devriez pouvoir appuyer sur Soumettre et voir un nouveau projet dans la table projets de Supabase.

http://localhost:4200

img


Imgur