[CST-4634] Change email validator in order to show error also on focus

src/app/access-control/epeople-registry/eperson-form/eperson-form.component.ts

@@ -1,5 +1,5 @@
-import { Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
-import { FormGroup, Validators } from '@angular/forms';
+import { ChangeDetectorRef, Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
+import { FormGroup } from '@angular/forms';
 import {
   DynamicCheckboxModel,
   DynamicFormControlModel,
@@ -8,7 +8,7 @@ import {
 } from '@ng-dynamic-forms/core';
 import { TranslateService } from '@ngx-translate/core';
 import { combineLatest as observableCombineLatest, Observable, of as observableOf, Subscription } from 'rxjs';
-import { switchMap, take } from 'rxjs/operators';
+import { debounceTime, switchMap, take } from 'rxjs/operators';
 import { PaginatedList } from '../../../core/data/paginated-list.model';
 import { RemoteData } from '../../../core/data/remote-data';
 import { EPersonDataService } from '../../../core/eperson/eperson-data.service';
@@ -37,7 +37,7 @@ import { ValidateEmailNotTaken } from './validators/email-taken.validator';
 
 @Component({
   selector: 'ds-eperson-form',
-  templateUrl: './eperson-form.component.html'
+  templateUrl: './eperson-form.component.html',
 })
 /**
  * A form used for creating and editing EPeople
@@ -162,7 +162,13 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
    */
   isImpersonated = false;
 
-  constructor(public epersonService: EPersonDataService,
+  /**
+   * Subscription to email field value change
+   */
+  emailValueChangeSubscribe: Subscription;
+
+  constructor(protected changeDetectorRef: ChangeDetectorRef,
+              public epersonService: EPersonDataService,
               public groupsDataService: GroupDataService,
               private formBuilderService: FormBuilderService,
               private translateService: TranslateService,
@@ -266,11 +272,14 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
           canLogIn: eperson != null ? eperson.canLogIn : true,
           requireCertificate: eperson != null ? eperson.requireCertificate : false
         });
-      }));
 
-      if (!!this.formGroup.controls.email) {
+        if (eperson === null && !!this.formGroup.controls.email) {
           this.formGroup.controls.email.setAsyncValidators(ValidateEmailNotTaken.createValidator(this.epersonService));
+          this.emailValueChangeSubscribe = this.email.valueChanges.pipe(debounceTime(300)).subscribe(() => {
+            this.changeDetectorRef.detectChanges();
+          });
         }
+      }));
 
       const activeEPerson$ = this.epersonService.getActiveEPerson();
 
@@ -405,28 +414,6 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
     }
   }
 
-  /**
-   * Checks for the given ePerson if there is already an ePerson in the system with that email
-   * and shows notification if this is the case
-   * @param ePerson               ePerson values to check
-   * @param notificationSection   whether in create or edit
-   */
-  private showNotificationIfEmailInUse(ePerson: EPerson, notificationSection: string) {
-    // Relevant message for email in use
-    this.subs.push(this.epersonService.searchByScope('email', ePerson.email, {
-      currentPage: 1,
-      elementsPerPage: 0
-    }).pipe(getFirstSucceededRemoteData(), getRemoteDataPayload())
-      .subscribe((list: PaginatedList<EPerson>) => {
-        if (list.totalElements > 0) {
-          this.notificationsService.error(this.translateService.get(this.labelPrefix + 'notification.' + notificationSection + '.failure.emailInUse', {
-            name: ePerson.name,
-            email: ePerson.email
-          }));
-        }
-      }));
-  }
-
   /**
    * Event triggered when the user changes page
    * @param event
@@ -438,15 +425,6 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
     });
   }
 
-  /**
-   * Update the list of groups by fetching it from the rest api or cache
-   */
-  private updateGroups(options) {
-    this.subs.push(this.epersonService.getActiveEPerson().subscribe((eperson: EPerson) => {
-      this.groups = this.groupsDataService.findAllByHref(eperson._links.groups.href, options);
-    }));
-  }
-
   /**
    * Start impersonating the EPerson
    */
@@ -481,7 +459,8 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
               }
               this.cancelForm.emit();
             });
-            }}
+          }
+        }
       });
     });
   }
@@ -501,8 +480,10 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
     this.onCancel();
     this.subs.filter((sub) => hasValue(sub)).forEach((sub) => sub.unsubscribe());
     this.paginationService.clearPagination(this.config.id);
+    if (hasValue(this.emailValueChangeSubscribe)) {
+      this.emailValueChangeSubscribe.unsubscribe();
+    }
   }
-
 
   /**
    * This method will ensure that the page gets reset and that the cache is cleared
@@ -513,4 +494,35 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
     });
     this.initialisePage();
   }
+
+  /**
+   * Checks for the given ePerson if there is already an ePerson in the system with that email
+   * and shows notification if this is the case
+   * @param ePerson               ePerson values to check
+   * @param notificationSection   whether in create or edit
+   */
+  private showNotificationIfEmailInUse(ePerson: EPerson, notificationSection: string) {
+    // Relevant message for email in use
+    this.subs.push(this.epersonService.searchByScope('email', ePerson.email, {
+      currentPage: 1,
+      elementsPerPage: 0
+    }).pipe(getFirstSucceededRemoteData(), getRemoteDataPayload())
+      .subscribe((list: PaginatedList<EPerson>) => {
+        if (list.totalElements > 0) {
+          this.notificationsService.error(this.translateService.get(this.labelPrefix + 'notification.' + notificationSection + '.failure.emailInUse', {
+            name: ePerson.name,
+            email: ePerson.email
+          }));
+        }
+      }));
+  }
+
+  /**
+   * Update the list of groups by fetching it from the rest api or cache
+   */
+  private updateGroups(options) {
+    this.subs.push(this.epersonService.getActiveEPerson().subscribe((eperson: EPerson) => {
+      this.groups = this.groupsDataService.findAllByHref(eperson._links.groups.href, options);
+    }));
+  }
 }

src/app/access-control/epeople-registry/eperson-form/validators/email-taken.validator.ts

@@ -16,7 +16,9 @@ export class ValidateEmailNotTaken {
       return ePersonDataService.getEPersonByEmail(control.value)
         .pipe(
           getFirstSucceededRemoteData(),
-                        map(res => { return !!res.payload ? { emailTaken: true } : null; })
+          map(res => {
+            return !!res.payload ? { emailTaken: true } : null;
+          })
         );
     };
   }

src/app/app.module.ts

@@ -7,7 +7,11 @@ import { EffectsModule } from '@ngrx/effects';
 import { RouterStateSerializer, StoreRouterConnectingModule } from '@ngrx/router-store';
 import { MetaReducer, Store, StoreModule, USER_PROVIDED_META_REDUCERS } from '@ngrx/store';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
-import { DYNAMIC_MATCHER_PROVIDERS } from '@ng-dynamic-forms/core';
+import {
+  DYNAMIC_ERROR_MESSAGES_MATCHER,
+  DYNAMIC_MATCHER_PROVIDERS,
+  DynamicErrorMessagesMatcher
+} from '@ng-dynamic-forms/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { ScrollToModule } from '@nicky-lenaers/ngx-scroll-to';
 
@@ -52,6 +56,7 @@ import { IdleModalComponent } from './shared/idle-modal/idle-modal.component';
 
 import { UUIDService } from './core/shared/uuid.service';
 import { CookieService } from './core/services/cookie.service';
+import { AbstractControl } from '@angular/forms';
 
 export function getBase() {
   return environment.ui.nameSpace;
@@ -61,6 +66,14 @@ export function getMetaReducers(): MetaReducer<AppState>[] {
   return environment.debug ? [...appMetaReducers, ...debugMetaReducers] : appMetaReducers;
 }
 
+/**
+ * Condition for displaying error messages on email form field
+ */
+export const ValidateEmailErrorStateMatcher: DynamicErrorMessagesMatcher =
+  (control: AbstractControl, model: any, hasFocus: boolean) => {
+    return (control.touched && !hasFocus) || (control.errors?.emailTaken && hasFocus);
+  };
+
 const IMPORTS = [
   CommonModule,
   SharedModule,
@@ -146,6 +159,10 @@ const PROVIDERS = [
    multi: true,
    deps: [ CookieService, UUIDService ]
   },
+  {
+    provide: DYNAMIC_ERROR_MESSAGES_MATCHER,
+    useValue: ValidateEmailErrorStateMatcher
+  },
   ...DYNAMIC_MATCHER_PROVIDERS,
 ];