Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

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

Referente ao curso Angular parte 2: Autenticação, Forms e lazy loading

por Angelo Ferreira
| 313.1k xp | 7 posts

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!
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

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.

por Angelo Ferreira
| 313.1k xp | 7 posts

Perfeito, muito obrigado!

por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

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

Abraços e bons estudos.