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).

Pour faire ce lien, on doit associer le formulaire à l'instance projetForm de l'objet FormGroup de la classe.

L'association se fait via [formGroup]="projetForm" directement sur la balise form et ensuite l'utilisation de formControlName sur les champs pour les associer aux propriétés du FormGroup.

1. Ajoutez la directive [formGroup] à la balise form. Vous devrez importer ReactiveFormsModule

2. Associez à formGroup l'instance de formulaire projetForm

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

   @Component({
     selector: 'app-projet-creer',
     imports: [
       ReactiveFormsModule
     ],
     template: `
       <div class="row">
         <div class="col-lg-6 offset-lg-3">
           <h1>Créer un nouveau projet</h1>
   
           <form [formGroup]="projetForm">
   
       <!-- ... -->

   info

   • [formGroup] est une directive Angular permettant d'associer un formulaire à une variable de type FormGroup dans la composante.
   • projetForm est la variable de la composante contenant la définition du formulaire

3. Ajoutez des attributs formControlName sur les champs nom et description

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

   @Component({
     selector: 'app-projet-creer',
     imports: [
       ReactiveFormsModule
     ],
     template: `
       <div class="row">
         <div class="col-lg-6 offset-lg-3">
           <h1>Créer un nouveau projet</h1>
   
           <form [formGroup]="projetForm">
             <div class="form-floating mb-3">
               <input type="text" formControlName="nom" class="form-control" id="projetNom" placeholder="Nom">
               <label for="projetNom">Nom</label>
             </div>
   
             <div class="form-floating mb-3">
               <textarea class="form-control" formControlName="description" placeholder="Description" id="projetDescription"></textarea>
               <label for="projetDescription">Description</label>
             </div>
   
             <button type="submit" class="btn btn-primary">Soumettre</button>
           </form>
         </div>
       </div>
     `,
     styles: ``
   })

   info

   Via formControlName, vous associez le champ (input, textarea, ...) à une propriété définie par le FormGroup dans la classe. Ici, on associe à nom et description.

4. Pour traiter l'envoi du formulaire, on doit créer une fonction dans la classe du composant et la lier au formulaire. Créez une fonction soumettre dans le composants:

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

   export class ProjetCreer {
     projetForm = new FormGroup({
       nom: new FormControl(''),
       description: new FormControl(''),
     });
   
     protected soumettre() {
       console.log('Fonction soumettre() du formulaire!')
     }
   }

5. Pour lier l'action submit du formulaire à la fonction, on peut lier l'événement ngSubmit du formulaire à la fonction soumettre().

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

   @Component({
     selector: 'app-projet-creer',
     imports: [
       ReactiveFormsModule
     ],
     template: `
       <div class="row">
         <div class="col-lg-6 offset-lg-3">
           <h1>Créer un nouveau projet</h1>
   
           <form [formGroup]="projetForm" (ngSubmit)="soumettre()">

   info

   ngSubmit remplace l'événement standard submit d'un formulaire conventionnel. On vient en quelque sorte dire: lorsque le formulaire est envoyé, appelle la fonction soumettre().

Tester dans le navigateur

Dans votre navigateur, avec la console des outils développeur ouverte, appuyez sur le bouton soumettre et vous devriez voir le message s'afficher!

http://localhost:4200/projets/creer