Estoy tratando de agregar validación al correo electrónico.

Estructura: utilizando el formulario reactivo, obtenga un correo electrónico y verifique si ya existe utilizando el filtro javascript.

componente.ts:

 isUniqueEmail(): ValidatorFn { return (control: AbstractControl): any | null => { if(control.value.email != null){ this.httpService .getDataFromServer("api/employees?company_branch=" +this.user.branch_id) .subscribe((resp) => { var data = resp.data.employee; const found = data.filter(v => v.email == control.value.email); if(found.length !== 0){ console.log("found one"); return {exist: true} } }); } } }

si el correo electrónico ya existe, se encontró la impresión console.log y todo funciona bien.

declaración de control de forma:

 this.employeeForm = new FormGroup({ email: new FormControl(null, [ Validators.required, Validators.pattern("^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[az]{2,4}$"), ValidatorsSettings.notOnlyWhitespace, ]), ),{validators: this.isUniqueEmail()}}

en html:

 <div class="row"> <div class="from-group"> <label for="Email"> Email </label> <mat-divider></mat-divider> <input type="text" id="Email" class="form-control" formControlName="email" /> <div *ngIf="employeeForm.get('email').invalid && (employeeForm.get('email').touched || employeeForm.get('email').dirty)" class="help-block"> <div *ngIf="employeeForm.get('email').errors.required || employeeForm.get('email').errors.notOnlyWhitespace" class="help-block"> Email is required </div> <div *ngIf="employeeForm.get('email').errors.pattern" class="help-block"> Email must be a valid email address format </div> <mat-error *ngIf="employeeForm.errors?.exist" class="help-block" >Email Already Exist</mat-error> </div> </div> </div>

no aparece el error! qué hice mal ?