Front-end Display Message "This email is already registered" PrimeNG & scss - node.js

Question

I am not able to figure out how to inform a new registering user that email is already registered below the input element on entering email on my front-end in angular. Please assist. I am able to retrieve my async validation response as to whether the email is already registered or is available. I am using PrimeNG components and scss
In my Network Response, API response, I see {"email":"This eamil is already registered"} if the email is already registered and if the email is not registered, {"available":true}.
Below is the code for async validator in my unique-email.ts.
export class UniqueEmail implements AsyncValidator {
constructor(private authService: AuthService) {}
validate = (control: AbstractControl) => {
const { value } = control;
return this.authService.emailAvailable(value).pipe(
map((value) => {
if (value.available) {
return null;
}
}),
catchError((err) => {
if (err.error.email) {
return of({ EmailInUse: true });
} else {
return of({ noConnection: true });
}
})
);
};
}
Below is my code for AuthService.ts
interface EmailAvailableResponse {
available: boolean;
}
export class AuthService {
apiURLAuth = environment.apiUrl + 'users';
constructor(private http: HttpClient) {}
emailAvailable(email: string) {
return this.http.post<EmailAvailableResponse>(`${this.apiURLAuth}/emailexist`, {
email
});
}
}
My signup.component.ts
export class SignupComponent implements OnInit {
signupFormGroup: FormGroup;
isSubmitted = false;
authError = false;
constructor(
private matchPassword: MatchPassword,
private uniqueEmail: UniqueEmail,
private formBuilder: FormBuilder,
private authService: AuthService,
private localstorageService: LocalstorageService
) {}
private _initSignupForm() {
this.signupFormGroup = this.formBuilder.group(
{
email: ['', [Validators.required, Validators.email], [this.uniqueEmail.validate]]
}
)
}
get isignupForm() {
return this.signupFormGroup.controls;
}
}
<form [formGroup]="signupFormGroup">
<div class="col-12">
<div class="p-inputgroup">
<span class="p-inputgroup-addon"><i class="pi pi-id-card"></i></span>
<input type="text" formControlName="email" pInputText placeholder="Email" />
</div>
<small *ngIf="isignupForm.email.invalid && isSubmitted" class="p-error"
><span *ngIf="isignupForm.email.errors.required">Email is required</span>
<span *ngIf="isignupForm.email.errors.email">Email is Invalid</span>
<span *ngIf="isignupForm.email.errors.email.EmailInUse"
>Email is already registered to another user. Try another email account</span
>
</small>
</div>
</form>

Answer 1

There is an error for
isignupForm.email.errors.email.EmailInUse
Instead, use:
<span *ngIf="isignupForm.email.errors.EmailInUse">
Email is already registered to another user. Try another email account
</span>
Sample Demo on StackBlitz