Имя пользователя уже существует с использованием директивы angular 9

Question

Я хочу сделать проверку имени пользователя, как только он вошел, и отобразить ошибку типа «это имя пользователя уже существует в нашей базе данных», четыре шага, чтобы сделать это, но не работает

сначала в authService

  getUserByUserName(uName :string){
return this.http.get<any>(environment.baseUrl  + 'auth/login' , {
  params:new HttpParams().set('userName',uName)
})

}

и создать директиву

export function usernameValidatorDirective(authService:AuthService):AsyncValidatorFn{return (control: AbstractControl):Promise<ValidationErrors |null > | Observable<ValidationErrors | null> => {
return authService.getUserByUserName(control.value).pipe(
  map(users=>{
    return users && users.length>0 ? {'userNameValidator':true}:null;
  })
)



@Directive({selector: '[userNameValidator]', providers:[{provide:NG_ASYNC_VALIDATORS,useExisting:UsernameValidatorDirective,multi:true}]

})

constructor(private authService:AuthService) { }
 validate(control: import("@angular/forms").AbstractControl): Promise<import("@angular/forms").ValidationErrors> | import("rxjs").Observable<import("@angular/forms").ValidationErrors> {
return this.authService.getUserByUserName(control.value).pipe(
  map(users=>{
    return users && users.length>0 ? {'userNameValidator':true}:null;
  })
)

}

затем заполнить форму в тс

      userName:['',null ,
  usernameValidatorDirective(this.authService)],

в html шаблоне

                        <div class='form-group'>
                        <label class="control-label" style="margin-right:10px; color:white">user name</label>
                        <input formControlName="userName" type="text"
                            [ngClass]="{'is-invalid' : registerForm.get('userName').invalid && registerForm.get('userName').touched}"
                            class="form-control" > 
                        <div class="invalid-feedback">user already exits  </div>
                    </div>