Aller au contenu principal

21-4 Soumettre le formulaire

Il est maintenant temps de soumettre le formulaire!

  1. Premièrement, on vérifie que this.projetId existe bien (qu'il a été passé au modal) et que le formulaire est valide. On obtient ensuite une issue à l'aide de issueForm.value
src/app/features/issues/components/issue-creer-modal.ts
async soumettre() {
  if (this.projetId && this.issueForm.valid) {
    const issue = this.issueForm.value as CreerIssueRequete;
  }
}
  1. Associer le projetId à l'issue. C'est à cette étape que nous assignerons manuellement le projet associé à l'issue.
src/app/features/issues/components/issue-creer-modal.ts
async soumettre() {
  protected async soumettre() {
    if (this.projetId && this.issueForm.valid) {
      const formValue = this.issueForm.value;
      const issueCreerRequete: IssueCreerRequete = {
        titre: formValue.titre!,
        contenu: formValue.contenu!,
        auteur: "Auteurtest",
        projet_id: this.projetId
      }
    }
  }
}
info

Remarquez l'assignation du projet_id, cette étape est très importante pour garantir que l'issue est associée au bon projet!

attention

Nous mettons une valeur temporaire de test pour l'auteur puisque nous n'avons pas vu les mécanismes d'authentification encore.

  1. Appeler le service pour faire la requête d'API de création
    src/app/features/issues/components/issue-creer-modal.ts
    protected async soumettre() {
      if (this.projetId && this.issueForm.valid) {
        const formValue = this.issueForm.value;
        const issueCreerRequete: IssueCreerRequete = {
          titre: formValue.titre!,
          contenu: formValue.contenu!,
          auteur: "Auteurtest",
          projet_id: this.projetId
        }
        
        const nouvelIssue = await this.issueService.creer(issueCreerRequete);
      }
    }
  2. Fermer la fenêtre, tout en retournant la nouvelle issue via l'événement de fermeture.
src/app/features/issues/components/issue-creer-modal.ts
protected async soumettre() {
  if (this.projetId && this.issueForm.valid) {
    const formValue = this.issueForm.value;
    const issueCreerRequete: IssueCreerRequete = {
      titre: formValue.titre!,
      contenu: formValue.contenu!,
      auteur: "Auteurtest",
      projet_id: this.projetId
    }

    const nouvelIssue = await this.issueService.creer(issueCreerRequete);
    this.activeModal.close(nouvelIssue);
  }
}
info

Remarquez que l'on retourne le nouvel objet créé lors de la fermeture de la fenêtre!

Vous pouvez tester et la création devrait fonctionner. Utilisez l'onglet réseau pour valider.

http://localhost:4200

img