Concrete Logo
Hamburger button

AngularJS: Validação customizada com Diretivas

  • Blog
  • 13 de Maio de 2015
Share

*Post originalmente publicado em inglês no Blog pessoal do autor.

Neste post, vamos criar uma diretiva simples em AngularJS para fazer uma validação customizada.

Depois de dar uma olhada na documentação de AngularJS, nós podemos perceber que não existe uma validação de input para um número exato de caracteres. Então, se precisamos que uma string seja válida somente se tivermos dois caracteres nós teremos que criar nossa própria validação customizada em AngularJS com uma diretiva.

Primeiro, vamos criar nossa estrutura seguindo a abordagem do John Papa:

Agora, vamos restringir nossa diretiva apenas a atributos (restrict: ‘A’) e criar uma função de ligação (link):

E agora nós precisamos adicionar um $scope.$watch para ficar lendo o input do usuário. Para isso, nós vamos dar um require em ngModel dentro da nossa diretiva.

Agora a única coisa que falta é a validação. No nosso caso, nós vamos checar se value.length === 2 e então usar o método $setValidity para aplicar a validação em si:

E pronto! Agora, para usar essa diretiva, nós vamos simplesmente chamá-la do nosso input, assim:

Mas isso não é muito inteligente. Se nós precisamos, por exemplo, da mesma validação, mas para uma string com 5 caracteres, por exemplo, nós vamos precisar criar outra diretiva. Para evitar esse tipo de trabalho, nós podemos mudar nossa diretiva para aceitar uma variável que saberá quantos caracteres nosso input precisará ter para ser válido:

E agora podemos chamar assim:

Certo? Ficou alguma dúvida, tem algum comentário ou perdeu algum passo? Deixe abaixo seu comentário!