Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Qual a relação entre .userNameTaken e checkUserNameTaken()

No curso Angular parte 2: Aula 4 - Atividade 06 Validador assíncrono, aos 14 min e 20 segs. de vídeo o professor faz uma associação ao método userNameTaken no html

*ngIf="singupForm.get('userName').errors?.userNameTaken"

com o método checkUserNameTaken() da classe UserNotTakenValidatorService

  checkUserNameTaken() {
    return (control: AbstractControl) => {
      return control
        .valueChanges
        .pipe(debounceTime(300))
        .pipe(switchMap(userName => this.singupService.checkUserNameTaken(userName)))
        .pipe(map(isTaken => isTaken ? { userNameTaken: true } : null))
        .pipe(first())
    }
  }

A dúvida é:

  • Como eu sei que .userNameTaken esta de fato chamando checkUserNameTaken(), pois trocando o nome .userNameTaken para qualquer outra coisa (Ex.: .bla), o método continua funcionando. Poderia me explicar melhor este trecho e o que ele faz ?
3 respostas
solução!

Fala ai Angelo, tudo bem? Vamos lá:

A validação assíncrona é feita para o campo userName, isso porque o validador foi definido como terceiro parâmetro da propriedade userName:

userName: ['',
    [
        Validators.required,
        lowerCaseValidator,
        Validators.minLength(2),
        Validators.maxLength(30)
    ],
    this.userNotTakenValidatorService.checkUserNameTaken()
],

Se a gente reparar o retorno da função checkUserNameTaken:

.pipe(map(isTaken => isTaken ? { userNameTaken: true } : null))

Repare que se o isTaken retornado pela API é true, a gente retorna um objeto onde a propriedade é userNameTaken e seu valor será true, senão, a gente retorna null.

Esse { userNameTaken: true } é o .userNameTaken utilizado no template do componente, ou seja: *ngIf="singupForm.get('userName').errors?.userNameTaken"

Espero ter ajudado.

Perfeito, muito obrigado!

Magina Angelo, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software