Angular Academy · Aula

Validadores assíncronos

Valide dados no servidor de forma assíncrona.

Validadores assíncronos é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.

Validação que aguarda

Algumas validações precisam de um servidor, como verificar se um nome de usuário já está em uso. Os validadores assíncronos retornam uma promessa ou um observável que é resolvido com um mapa de erros ou nulo.

O tipo AsyncValidatorFn

Um validador assíncrono recebe um controle e retorna Observable<ValidationErrors | null> ou uma promessa.

const v: AsyncValidatorFn = (control) => {
  return checkAvailable(control.value);
};

Retornar null significa válido

Resolva para null quando o valor for válido ou para um objeto de erro, como { taken: true }, quando for inválido, exatamente como nos validadores síncronos.

Um validador de nome de usuário

Esse validador chama um serviço e mapeia o resultado.

usernameValidator(api: UserApi): AsyncValidatorFn {
  return (control) =>
    api.isTaken(control.value).pipe(
      map(taken => taken ? { taken: true } : null)
    );
}

Registrando-o

Os validadores assíncronos ficam no terceiro argumento de um controle, separados dos validadores síncronos.

new FormControl('', {
  validators: [Validators.required],
  asyncValidators: [usernameValidator(api)]
});

O estado PENDING

Enquanto um validador assíncrono é executado, o status do controle é PENDING. Use-o para exibir um indicador de carregamento.

@if (form.controls.username.pending) {
  <span>Checking...</span>
}

Adiando solicitações

Os validadores assíncronos são executados a cada alteração de valor. Adie as solicitações para evitar sobrecarregar o servidor.

return timer(300).pipe(
  switchMap(() => api.isTaken(control.value)),
  map(taken => taken ? { taken: true } : null)
);

switchMap cancela chamadas obsoletas

Usar switchMap cancela a solicitação anterior em andamento quando o valor muda novamente, fazendo com que apenas o resultado mais recente seja considerado.

Estratégia updateOn

Defina updateOn: 'blur' para que a validação assíncrona seja executada somente quando o usuário sair do campo, reduzindo o número de solicitações.

new FormControl('', {
  asyncValidators: [usernameValidator(api)],
  updateOn: 'blur'
});

Lendo o erro

Exiba o erro quando a validação for concluída e o controle estiver alterado ou tiver recebido foco.

@if (form.controls.username.hasError('taken')) {
  <span>Username already taken</span>
}

Práticas recomendadas

Sempre adie as solicitações, cancele as solicitações obsoletas, mostre um indicador de espera e trate os erros de rede para que o formulário não fique preso em PENDING.

Verificação rápida

Verifique sua compreensão dos validadores assíncronos.

Recapitulação

Você aprendeu que AsyncValidatorFn retorna um observável ou uma promessa de ValidationErrors | null, registrado no terceiro argumento do controle, colocando o controle em PENDING. Adie as solicitações e use switchMap para gerenciar as chamadas ao servidor.

Perguntas Frequentes

A aula “Validadores assíncronos” é grátis?

Sim — o texto completo de “Validadores assíncronos” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.

O que vou aprender em “Validadores assíncronos”?

Valide dados no servidor de forma assíncrona. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Angular Academy?

Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Validadores assíncronos”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Angular Academy?

Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Angular Academy