Angular 14+ async validator with de-bounce

Angular 14+ async validator with de-bounce.ts

employerCodeExists(): AsyncValidatorFn {
    return (control: AbstractControl): Observable<ValidationErrors | null> => {
      const hasEmployerCode = this.hasEmployerCodeFormControl.value;
      const controlValue: string = control.value;

      // Note: see https://stackoverflow.com/questions/36919011/how-to-add-debounce-time-to-an-async-validator-in-angular-2/62662296#62662296
      // for explanation of why this is the most correct way to do async validation with debounce
      if (hasEmployerCode && controlValue) {
        return of(controlValue)
          .pipe(
            delay(200),
            switchMap(employerCode => {
              return this.personalDetailsService.getEmployerName(employerCode)
              .pipe(
                indicateLoading(this.isEmployerNameLoading$),
                map(result => {
                  this.employerNameSubject.next(result);
                  return result === null ? {'employer-code-non-existant': true} : null;
                })
              );
            })
          )
      } else {
        return of(null);
      }
    }