formulaire fonctionnel, merci Hédi git add .!

This commit is contained in:
cecilesimplon93 2022-03-13 20:28:00 +01:00
parent 35cba2625c
commit 227069f71b
4 changed files with 77 additions and 33 deletions

View File

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

View File

@ -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

View File

@ -5,31 +5,33 @@
<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 id="message" name="message" placeholder="Formulez votre demande ici" required></textarea>
<textarea formControlName="messageFc" id="msg" name="message" placeholder="Formulez votre demande ici"
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>
</form>
</div>

View File

@ -1,40 +1,83 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
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 { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { MembreService } from 'src/app/services/membre.service';
import { HttpClient } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { TokenService } from 'src/app/services/token.service';
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 {
memberName: any;
public contactForm: FormGroup;
memberName: any;
alert: any;
isShow: boolean;
expName: any;
expMail: any;
constructor(private membreService: MembreService,
private http: HttpClient,
private router: Router,
private tokenService: TokenService) {
constructor(private membreService: MembreService,
private tokenService: TokenService,
private fb: FormBuilder,
private mailService: MailService,
) {
this.contactForm = new FormGroup({});
this.alert = "";
this.isShow = false;
}
}
ngOnInit(): void {
this.contactForm = this.fb.group(
{
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.expName = this.memberName.nom;
this.expMail = this.memberName.email;
})
}
ngOnInit(): void {
this.membreService.getMembreId(this.tokenService.getCurrentMembreId()).subscribe((result) => {
this.memberName = result ; }) }
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(){ }
}