value variable not sent to my email

[geoffreyemerit]

Hello,

I'm sending you this message because I don't understand why in my form there are 3 variables out of 6 that are transferred...

when I console.log in the function that sends the variables, they exist but it doesn't want to send anything.

i'm on angular 15.2.

Thanks in advance for your help

HTML
`

C'est le moment !

Réserve ta soirée VIP et ton voyage au soleil !

    <div class="w-full">
        <label for="firstname" class="block text-900 font-medium mb-2">Prénom</label>
        <input class="w-full mb-3" pInputText id="firstname" name="firstname" type="text" placeholder="John" [(ngModel)]="firstname" #registerFirstnameState="ngModel" required (ngModelChange)="onDropdownChange($event)"/>
        <div *ngIf="registerForm.submitted && (registerFirstnameState.touched || registerFirstnameState.touched) && registerFirstnameState.errors">
            <small class="text-danger" *ngIf="registerFirstnameState.errors['required']">Le nom est requis.</small>
        </div>

        <label for="lastname" class="block text-900 font-medium mb-2">Nom</label>
        <input class="w-full mb-3" pInputText id="lastname" name="lastname" type="text" placeholder="Doe" [(ngModel)]="lastname" #registerLastnameState="ngModel" required (ngModelChange)="onDropdownChange($event)"/>
        <div *ngIf="registerForm.submitted && (registerLastnameState.touched || registerLastnameState.touched) && registerLastnameState.errors">
            <small class="text-danger" *ngIf="registerLastnameState.errors['required']">Le prénom est requis.</small>
        </div>

        
            <div class="flex flex-wrap align-items-center justify-content-between mr-6 ">
                <label for="integrationDate" class="block text-900 font-medium mb-2">Date intégration challenge</label>
                <p-calendar class="w-full mb-4" id="integrationDate" name="integrationDate" type="date" [(ngModel)]="integrationDate" #registerIntegrationDateState="ngModel" placeholder="01/01/2024" (ngModelChange)="onDropdownChange($event)"></p-calendar>
                <div *ngIf="registerIntegrationDateState.invalid && (registerIntegrationDateState.dirty || registerIntegrationDateState.touched) && registerIntegrationDateState.errors">
                    <small class="text-danger">La date d'intégration au jeu concours est requise.</small>
                </div>
            
                <label for="packChoice" class="block text-900 font-medium mb-2">Pack Premium</label>
                <p-dropdown class="w-full mb-4" inputId="packChoice" id="packChoice" name="packChoice" type="text" [options]="packList" [(ngModel)]="packChoice" #registerPackChoiceState="ngModel" placeholder="Pack VIP" (ngModelChange)="onDropdownChange($event)"></p-dropdown>
                <div *ngIf="registerPackChoiceState.invalid && (registerPackChoiceState.dirty || registerPackChoiceState.touched) && registerPackChoiceState.errors">
                    <small class="text-danger">Le choix du pack est requis.</small>
                </div>
            </div>

        <p-toast></p-toast>
        <button type="submit" value="Send" pButton pRipple icon="pi pi-check" label="Submit" class="form-submit-button w-full mt-2" [disabled]="!isFormValid" [style]="{background: 'linear-gradient(90deg, rgba(226,0,126,1) 0%, rgba(107,35,131,1) 100%)'}"></button>
    </div>
</form>

`

TS
`import { Component, OnInit, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';
import emailjs, { EmailJSResponseStatus } from '@emailjs/browser';
import { MessageService } from 'primeng/api';

@component({
selector: 'app-register-form',
templateUrl: './register-form.component.html',
styleUrls: ['./register-form.component.scss'],
providers: [MessageService]
})
export class RegisterFormComponent implements OnInit{

@ViewChild('registerForm')
registerForm!: NgForm;
isFormValid: boolean = false;

firstname: string = "";
lastname: string = "";
company: string = "";
salesteam: string = "";
integrationDate!: Date;
packChoice: string = "";

companyList: any[] = [{name: "Agentys"}, {name:"Weelodge"}]
packList: string[] = [
"Pack Gala SOLO",
"Pack Gala DUO (accompagnant hors réseau)",
"Pack Gala + Séminaire chambre SOLO",
"Pack Gala + Séminaire chambre DUO",
"Pack Gala DUO + Séminaire chambre SOLO",
"Pack Gala DUO + Séminaire chambre DUO"
]
salesteamList: string[] = ["Andrésy","Conflans Ste Honorine", "Eragny", "Jouy Le Moutier", "Poissy", "Achères", "Triel sur Seine", "Weelodge Center", "Osny", "La Varenne", "Le Perreux sur Marne", "Le Plessis Trevise", "St Maur des Fosses - Adamville", "St Maur des Fosses - Mairie", "St Maur des Fosses - Vieux St Maur", "Tours", "Villiers sur Marne", "Champigny sur Marne", "Nogent sur Marne", "Paris 12"]

selectedCompanyIsValid: boolean = false;

constructor(private messageService: MessageService) {
}

ngOnInit() {
}

onDropdownChange(event:any) {
if (this.firstname && this.lastname && this.company && this.integrationDate) {

  return this.isFormValid = true;
}else{
  return this.isFormValid = false
};

}

public sendEmail(e: Event) {
e.preventDefault();
console.log('Company:', this.company);
console.log('Salesteam:', this.salesteam);
console.log('Pack Choice:', this.packChoice);
emailjs.sendForm('service_', 'template_', e.target as HTMLFormElement, 'user')
.then((result: EmailJSResponseStatus) => {

    console.log('Company 2:', typeof this.company);
    console.log('Salesteam 2 :', typeof this.salesteam);
    console.log('Pack Choice 2 :', typeof this.packChoice);

    this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Inscription bien envoyée' });
    this.registerForm.resetForm();
    this.firstname = "";
    this.lastname = "";
    this.company = "";
    this.salesteam = "";
    this.integrationDate = new Date();
    this.packChoice = "";

    this.isFormValid = false;

    console.log(result.text);
  }, (error) => {
    console.log(error.text);
    this.messageService.add({ severity: 'error', summary: 'Error', detail: "Erreur dans l'envoi de l'inscription" });
  });

}
}
`

[xr0master]

You have to edit your code to make it readable...
As far as I understand, custom components that are not form input do not work for you. You may add the hidden input to the form.

 <input type="hidden" name="packChoice" [ngModel]="packChoice" />