quarta-feira, 20 de abril de 2016

Validação Customizada de Formulários com Angular

Angular facilita a organização de nossas aplicações em tudo, inclusive na validação de formulários. Porém nenhum framework existente cobre a necessidade de todos os programadores. Com certeza em algum momento você vai querer adicionar alguma funcionalidade à sua aplicação que não é coberta pelo framework. No presente post eu quero inserir uma validação para cpf de um input em meu formulário e não quebrar a validação de angular e não ter de fazer gambiarras. Vamos lá, faremos isto utilizando directives. Para executar esta tarefa me baseei no Post de Ben Lesh e na documentação oficial. 
O pulo do gato é bem descrito por Ben Lesh, utilizando a função $setValidity pertencente ao ngModelController definimos se o valor de um ngModel de determinado campo é válido ou não. Vale à pena conhecer a documentação de ngModelController.

Vamos ao código:
 
dir.directive("cpfValidate", function(){
 return{
  // iremos utilizar a diretiva como atributo
  restrict: 'A', 
  // o elemento a ser validado deve conter o atributo ng-model
  require: 'ngModel',
  link: function(scope, elem, attr, ctrl) {
   /*
    $parser é um array de funções para sanitizar os dados,
    aqui eu adiciono a minha função de validação.
   */
   ctrl.$parsers.unshift(function(value) {
    /* 
     TestaCPF é uma função qualquer para testar um cpf 
     você pode implementar a sua ou copiar na internet.
    */
    var valid = TestaCPF(value);
    ctrl.$setValidity('cpfValidate', valid);
    // se for válido retorno valid, else retorna undefined.
    return valid ? value : undefined;
   });
  }
 };
});

Um comentário: