Aller au contenu principal

TP 11 : Formulaires Réactifs

Objectifs​

  • Créer un formulaire d'ajout d'album

Tâches​

Tâche 1 : Créer le formulaire​

Nous avons notre AlbumAddComponent, créons un formulaire en utilisant l'approche ReactiveForm.

  • Importer ReactiveFormModule dans votre app.module.ts

  • Injecter FormBuilder et AlbumService.

  • Créer un FormGroup avec tous les champs requis sauf id.

    • Utiliser le FormBuilder et ajouter quelques validateurs required.

  • Créer le formulaire HTML en utilisant les attributs FormGroup et formControlName.

  • Afficher les erreurs dans le cas où certains champs sont manquants.

  • Lors de la soumission, nous voulons poster notre album dans notre API REST.

  • Une fois l'insertion terminée, nous voulons rediriger vers le détail de l'album.

[ASTUCE] N'oubliez pas de vous abonner à l'Observable qui provient de votre service ! Vous pouvez rediriger vers la liste des albums une fois qu'il a été inséré.

Tâche 2: Afficher les détails de l'album​

  • Nous avons remarqué que notre album a un identifiant généré qui prend la forme d'une chaîne de caractères.
  • Nous avons ensuite une erreur si nous essayons de naviguer vers le nouvel élément en utilisant les boutons élément précédent ou suivant dans le AlbumDetailComponent.
  • Normalement, nous créerions une méthode backend pour nous donner l'album suivant ou précédent, mais nous n'avons pas une telle fonctionnalité. Nous devons trouver une stratégie pour le faire par nous-mêmes!

Stratégie :​

  • Lorsque nous récupérons nos albums, nous pouvons définir un tableau avec tous les IDs afin que nous puissions utiliser cela pour savoir où naviguer en premier. Vous pourriez également définir tous les albums dans un tableau, mais utiliser la stratégie ID nous permettrait de toujours récupérer la dernière version de notre objet.

album.service.ts​

  • Ajouter ids: string[] = [];
  • Modifier l'id dans album.model.ts pour qu'il soit une string.
  • Vous devrez corriger les erreurs dans votre album-static.service.ts.
  • Modifier maintenant notre méthode getAll pour qu'elle puisse stocker tous les ids dans un tableau.
 getAll(): Observable<Album[]>{
   return this.http.get<Album[]>(this.serverUrl).pipe(
     map(albums => {
       this.ids = albums.map(a => a.id);
       return albums;
     })
   );
 }
  • Ajouter les méthodes nextId et prevId
 // Exemple avec nextId
 nextId(id: string): string{
   const index = this.ids.indexOf(id);
   if (index === this.ids.length - 1){
     return this.ids[0];
   }
   return this.ids[index + 1];
 }

Vous aurez également besoin de modifier les paramètres dans toutes les méthodes de numéro à chaîne.

// exemple:    
get(id: string): Observable<Album>{

album-detail.component.ts​

  • Dans le ngOnInit, charger tous les ids des albums s'ils ne sont pas déjà chargés.
   if(this.albumService.ids.length === 0){
      this.albumService.getAll().subscribe()
    }
  • Plus tard dans le code, changer le cast de Number à String.
  • Appeler les nouvelles méthodes.