17-6 Conversion formulaire -> Modèle

Il est maintenant temps de soumettre le formulaire!

Vérifier que le formulaire est valide

Avant de faire un envoi au serveur et donc une requête POST, on doit vérifier que le formulaire est dans un état valide. En effet, dès que le bouton Soumettre est appuyé, la fonction soumettre() du composant est appelée. On ne veut pas envoyer l'information au serveur sans vérification que le tout est conforme aux attentes.

Une propriété valid existe sur l'instance de FormGroup permettant de valider l'état du formulaire:

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

  soumettre() {
    if(this.projetForm.valid){
      console.log('valide!');
    }
  }

Créer une interface pour la requête de création

La création d'un projet ne nécessite pas tous les champs d'un modèle projet. En effet, si on analyse le modèle projet, il comprend les propriétés suivantes:

export interface Projet {
  id: number;
  nom: string;
  description?: string;
  image_url?: string;
  created_at: string;
  updated_at: string;
}

Pour la création d'un projet, nous n'avons pas de id ou encore de created_at ou de updated_at.

Nous allons donc créer une interface qui représente une requête de création.

1. Sous le dossier core, créez un dossier requetes
2. Ajoutez un fichier TypeScript et nommez-le projet-creer-requete.ts
3. Dans ce fichier, définissez une interface appelée CreerProjetRequete et assurez-vous qu'elle soit exportée (export)

src/app/core/requetes/projet-creer-requete.ts

export interface ProjetCreerRequete {
  nom: string;
  description?: string;
  image_url?: string;
}

Préparer la requête

Pour envoyer la requête, nous devrons convertir le contenu du formulaire en requête ProjetCreerRequete.

Essayons ceci:

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

protected soumettre() {
  if(this.projetForm.valid){
    const valeurForm = this.projetForm.value;
    const projetRequete: ProjetCreerRequete = {
      nom: valeurForm.nom,
      description: valeurForm.description
    }
  }
}

Mais cela pose plusieurs problèmes:

• valeurForm.nom et valeurForm.nom retournent possiblement une valeur null, par exemple si le champ est vide. Nous avons une validation en place, mais le compilateur ne le sait pas lui! Dans la requête CreerProjetRequete, nom et description ne sont pas des valeurs optionnelles on encore nullables, elles doivent être de type string.

Utiliser l'opérateur ! pour les champs obligatoires

Comme nous avons validé que les données étaient valides (.valid), on sait que nom n'est pas null, ni undefined.

Ainsi, on peut forcer le compilateur à ignorer la possibilité que la valeur soit null ou undefined à l'aide de !:

protected soumettre() {
  if(this.projetForm.valid){
    const valeurForm = this.projetForm.value;
    const projetRequete: ProjetCreerRequete = {
      nom: valeurForm.nom!,
      description: valeurForm.description
    }
  }
}

info

À l'aide de !, on dit en quelque sorte au compilateur: ne m'avertit pas sur la possibilité d'un champ null ou undefined, je sais ce que je fais, cette propriété a une valeur!

Gérer les champs optionnels

Pour les champs optionnels (?), la façon dont le compilateur gère ce type est que le champ peut avoir une valeur OU être undefined. string | undefined dans le cas de description, par exemple.

Alors que le type du champ peut être string | null | undefined:

On peut gérer ce cas de figure de la façon suivante:

protected soumettre() {
  if(this.projetForm.valid){
    const valeurForm = this.projetForm.value;
    const projetRequete: ProjetCreerRequete = {
      nom: valeurForm.nom!,
      description: valeurForm.description || undefined
    }
  }
}

info

Dans le cas où valeurForm.description est null ou undefined, on assigne undefined à description.