I am using email validation in my angular form and it is working fine for most of the cases. But if i enter email address in form “test@test” it shows red outline around the email but doesn’t show error message. When i enter email in the form test@test. , it shows red outline along with error message which is exactly i want. Please help me out is there something wrong with the pattern or something else.
I need to show error message when i enter email in the form test@test

.ts

emailPattern = 
new RegExp(`^(?!\.)(?!.*\.$)(?=.{1,64}@)[^@]{1,64}` + `@(?:(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,})$`,);

const formControls = {
emailAddress: [
        { value: form?.emailAddress, disabled: formValuesDisabled },
        [Validators.required, Validators.email, Validators.pattern(this.emailPattern)],
      ],
}

.html

<mat-form-field appearance="outline" hideRequiredMarker="true">
 <mat-label>Email</mat-label>
<input
matInput
formControlName="emailAddress"
type="email"
#emailAddress
/>
@if (uForm.get(control.fName)?.hasError('required')) {
<mat-error>{{ control.validationError[0].value }}</mat-error>
} @if (uForm.get(control.fName)?.hasError('email')) {
<mat-error>{{ control.validationError[0].value }}</mat-error>
}
</mat-form-field>