Validação personalizada em formulários Angular

Aprenda a implementar validadores personalizados para garantir uma validação robusta dos formulários nas suas aplicações Angular.

O que é validação personalizada?

Os validadores personalizados permitem definir sua própria lógica de validação, além dos validadores integrados, como required ou minlength.

Criando um validador personalizado

Um validador personalizado é uma função simples que retorna null quando o valor é válido ou um objeto quando é inválido:

function forbiddenNameValidator(control: AbstractControl): { [key: string]: any } | null {
  return control.value === 'admin' ? { 'forbiddenName': true } : null;
}

Aplicando o validador

Aplique o validador personalizado ao seu controle de formulário:

this.myForm = new FormGroup({
  username: new FormControl('', [forbiddenNameValidator])
});

Exibindo erros de validação

Exiba mensagens de erro condicionalmente no seu modelo com base no estado da validação:

<div *ngIf="myForm.get('username').hasError('forbiddenName')">
  Username 'admin' is not allowed.
</div>

Usando diretivas de validação

Os validadores também podem ser usados diretamente como diretivas em formulários orientados por modelo:

<input name="username" ngModel forbiddenName>

Validadores assíncronos

Os validadores assíncronos permitem realizar validações que envolvem operações assíncronas, como verificações no servidor:

username: new FormControl('', null, [asyncValidator])

Testando validadores personalizados

Sempre teste os validadores para garantir que funcionem corretamente em diferentes cenários e casos extremos.

Resumo

Você aprendeu a criar e aplicar validadores personalizados para obter uma validação robusta de formulários no Angular. Excelente trabalho!