Reactive Angular Unique Username Validator

app.module.ts

//Import
import { HttpClientModule } from "@angular/common/http";

imports: [
    ...,
    ...,
    ...,
    HttpClientModule
  ],

custom-validation.service.ts

//Imports
import { HttpClient } from "@angular/common/http";
import { map} from "rxjs/operators";



//This goes into service
validateUsernameNotTaken(control: AbstractControl) {
    return this.checkUsernameNotTaken(control.value).pipe(
      map(res => {
        return res ? null : { usernameTaken: true };
      })
    );
  }

  //Fake API call -- You can have this in another service
  checkUsernameNotTaken(username: string) {
    return this.http.get("assets/fakedb.json").pipe(
      map((usernameList: Array<any>) =>
        usernameList.filter(user => user.username === username)
      ),
      map(users => !users.length)
    );
  }

fakedb.json

[
  {
    "username": "admin"
  },
  {
    "username": "superuser"
  },
  {
    "username": "user"
  },
  {
    "username": "user123"
  }
]