unique-name.validator.ts

import { AsyncValidatorFn, FormControl } from '@angular/forms';
import { map } from 'rxjs/operators';

export function uniqueNameValidator(userService: UserService): AsyncValidatorFn {
    return (control: FormControl<string>) => {
        return userService.getByName(control.value).pipe(
            map((isTaken) => (isTaken ? { uniqueName: true } : null)),
        );
    };
}