Durante os testes peguei um erro bobo em um caso bem artificial - colocando espaços em brando no userName e no password - mas como é muito simples de evitar coloquei aqui minha solução.
O problema é que o userTakenValidator tenta consultar o backend com o nome em branco, e recebe um erro.
Para evitar basta incluir um filter no pipe desse validator, ficando assim:
checkUserNameTaken() {
return (control: AbstractControl) => {
return control.valueChanges.pipe(
debounceTime(300),
filter(userName => userName.trim() !== ''),
switchMap(userName => this.signupService.checkUserNameTaken(userName)),
first(),
map(isTaken => isTaken ? { userNameTaken: true } : null)
)
}Sei que poderia ter colocado somente userName.trim() na condição, confiando no fato de que string vazia é falso e string com conteúdo é verdadeiro, mas prefiro a forma mais explícita, deixando bem claro o que quer se testar. Acredito que a legibilidade do código é muito mais importante do que o ganho que se tem economizando alguma digitação.
