Angular CLI 18 do not accept my form nativeElement

I have a simple form and for that I am using emailjs, and for my code I have the right Ids und key, here is it an example:

<form (ngSubmit)="sendEmail(form)" #form="ngForm">
<div class="form-group">
<label for="user_name">Name:</label>
<input type="text" id="user_name" name="user_name" ngModel required>
</div>

<div class="form-group">
<label for="user_email">E-Mail:</label>
<input type="email" id="user_email" name="user_email" ngModel required>
</div>

<div class="form-group">
<label for="message">Message:</label>
<textarea id="message" name="message" ngModel required></textarea>
</div>

<button type="submit" [disabled]="!form.valid">Senden</button>

</form>


for that I use method from contact.component.ts:

import { Component, ViewChild, ElementRef } from '@angular/core';
import emailjs from '@emailjs/browser';
import { NgForm } from '@angular/forms';

@Component({
selector: 'app-contact',
templateUrl: './contact.component.html',
styleUrl: './contact.component.css'
})
export class ContactComponent {
@ViewChild('form', { static: true }) formRef: ElementRef | undefined;

successMessage: string | null = null;
errorMessage: string | null = null;

constructor() { }

sendEmail(form: NgForm) {
if (form.valid && this.formRef) {
emailjs.sendForm('SERVICE_ID', 'TEMPLATE_ID', this.formRef.nativeElement, 'PUBLIC_KEY')
.then(() => {
this.successMessage = 'Your messa has been sent successfuly!';
this.errorMessage = null;
form.resetForm();
}, (error) => {
this.errorMessage = 'Error response: ' + error.text;
this.successMessage = null;
});
}
}

}


I cannot send my email, because the formRef always shows NULL. I did ask Gemini and he says the problem is in Timing, the method needs little bite more time to build the formRef and with that, the nativeElement.

Can you help with it?

The problem is in formRef

Continue reading...