formulaire fonctionnel, merci Hédi git add .!

src/app/components/humeur/humeur.component.ts

@@ -27,8 +27,7 @@ alert: any;
     this.alert="";
      }
 
-// récupère le getCurrentMembreId (stocké dans token.service), 
+// récupère l'id du membre connecté (stocké dans token.service), 
-// qui est l'identifiant du membre et qui stocké dans le token
   ngOnInit(): void { 
     const userId = this.tokenService.getCurrentMembreId();
     this.membreService.getMembreId(userId).subscribe({

src/app/pages/page-signup/page-signup.component.html

@@ -83,7 +83,7 @@
               !signupForm.controls['dateNaissanceFc'].valid
           }"
         />
-        <label for="floatingInputdateNaissance">Votr date de naissance</label>
+        <label for="floatingInputdateNaissance">Votre date de naissance</label>
       </div>
       <div class="form-floating">
         <input

src/app/pages/page-support/page-support.component.html

@@ -5,28 +5,30 @@
 <app-side-bar [backgroundColor]="'rgb(184, 202, 235)'"></app-side-bar>
 
 
-
 <div>
+
+    <app-alert *ngIf="isShow" [alert]="alert" (eventClose)="onClickCloseAlert()"></app-alert>
     <h2>Nous contacter</h2>
-    <form action="demande_support" method="post">
+    <form (ngSubmit)="onSubmit()" [formGroup]="contactForm">
+
 
         <label for="name">Nom :</label>
         <div>
-            <input type="text" id="name" value={{memberName.nom}} name="user_name">
+            <input type="text" id="floatingInputlastName" [(ngModel)]="expName" placeholder="{{expName}}"   name="lastName" formControlName="lastNameFc" />
         </div>
 
-
         <label for="mail">E-mail :</label>
         <div>
-            <input type="email" id="mail" name="user_mail" value={{memberName.email}} >
+            <input type="email" id="floatingInputemail" placeholder="{{expMail}}" [(ngModel)]="expMail" name="email" formControlName="emailFc" />
         </div>
 
         <label for="msg">Message :</label>
-       
+        <textarea formControlName="messageFc" id="msg" name="message" placeholder="Formulez votre demande ici"
-        <textarea id="message" name="message" placeholder="Formulez votre demande ici" required></textarea>
+            required></textarea>
 
         <div class="button">
-            <button class="btn btn-primary" (click)="onSendMail()">Envoyez votre message</button>
+            <button type="submit" [disabled]="contactForm.invalid" class="btn btn-primary">Envoyez votre
+                message</button>
             <button type="button" class="btn btn-danger" (click)="onDeleteMail()">Effacer</button>
         </div>
 

src/app/pages/page-support/page-support.component.ts

@@ -1,40 +1,83 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
-import { TokenService } from 'src/app/services/token.service';
-import { Membre } from 'src/app/models/membre';
-import { ActivatedRoute, Router } from '@angular/router';
-import { FormBuilder, FormGroup } from '@angular/forms';
 import { MembreService } from 'src/app/services/membre.service';
-import { HttpClient } from '@angular/common/http';
+import { TokenService } from 'src/app/services/token.service';
-import { FormsModule } from '@angular/forms';
+import { MailService } from 'src/app/services/mail.service';
+import { Component, OnInit } from '@angular/core';
+import { Mail } from 'src/app/models/mail';
 
-
-//DRIVEN FORM
 @Component({
   selector: 'app-page-support',
   templateUrl: './page-support.component.html',
   styleUrls: ['./page-support.component.scss']
 })
 export class PageSupportComponent implements OnInit {
-
+  public contactForm: FormGroup;
-memberName: any;
+  memberName: any;
+  alert: any;
+  isShow: boolean;
+expName: any;
+expMail: any;
 
 
-constructor(private membreService: MembreService,
+  constructor(private membreService: MembreService,
-  private http: HttpClient, 
+    private tokenService: TokenService,
-  private router: Router,  
+    private fb: FormBuilder,
-  private tokenService: TokenService) { 
+    private mailService: MailService,
+  ) {
+    this.contactForm = new FormGroup({});
+    this.alert = "";
+    this.isShow = false;
+  }
 
-}
+  ngOnInit(): void {
-
+    this.contactForm = this.fb.group(
-ngOnInit(): void {
+      {
+        lastNameFc: new FormControl('', [Validators.required]),
+        emailFc: new FormControl('', [Validators.required]),
+        messageFc: new FormControl('', [Validators.required]),
+      }
+    );
     this.membreService.getMembreId(this.tokenService.getCurrentMembreId()).subscribe((result) => {
-    this.memberName = result ; }) }
+      this.memberName = result;
+      this.expName = this.memberName.nom;
+      this.expMail = this.memberName.email;
+    })
+  }
+
+  public onSubmit(): void {
+    const nomValue = this.contactForm.value['lastNameFc'];
+    const emailValue = this.contactForm.value['emailFc'];
+    const messageValue = this.contactForm.value['messageFc'];
+    console.log(this.contactForm);
 
 
+    const mail: Mail = {
+      recipient: "organizee.contact@gmail.com",
+      subject: "Demande de support",
+      message: `
+      Bonjour!\n
+      Nouveau message d'un utilisateur du site\n
+      Nom : ${nomValue} \n
+      Email : ${emailValue} \n
+      Message : ${messageValue} \n `
+    };
+    this.mailService.envoiMailText(mail)?.subscribe((respMail) => {
+      console.log("Mail envoyé");
+      this.alert = { "type": "success", "content": "Votre message a été envoyé" };
+      this.isShow = true;
+    })
+  }
 
+  onDeleteMail() {
+    console.log("Formulaire effacé");
+    location.reload();
+    this.alert = { "type": "danger", "content": "Réinitialisation en cours" };
+    this.isShow = true;
+  }
 
-  onSendMail(){    }
+  onClickCloseAlert() {
+    this.isShow = !this.isShow;
+  }
 
-  onDeleteMail(){      }
 
 }