Uma alternativa ao ngMessage para Agular 2 e Ionic 2

Mesmo já caindo de cabeça no bravo novo mundo de Typescript/Angular2/Ionic2 e apostando na evolução dos frameworks, muitas vezes sinto saudade da facilidade que algumas bibliotecas já bem estruturadas e difundidas no Angular 1 proporcionavam.

Uma das minhas favoritas é a ngMessages que oferece um auxílio essencial ao lidar com mensagens de erro em formulários.

Nesse artigo, irei mostrar uma forma simples de conseguir a mesma funcionalidade principal utilizando o FormBuilder do Angular 2.

FormBuilder é uma nova classe para trabalhar com formulários no Angular 2. Essa classe nos permite declarar controles e validadores para nossos formulários. Isso é muito útil para que nossa lógica não fique toda na View, como era muitas vezes o caso no Angular 1 (lembra de ng-minlength, ng-maxlength repetidos?).

A maior parte desse código foi baseada no artigo escrito por Cory Rylan explicando o assunto. A leitura (em inglês) irá fornecer uma explicação mais completa do que a descrita aqui.

As validações

Vamos começar criando nossas funções de validação. Aqui, para fins didáticos vou deixar apenas uma de exemplo, que valida(até certo ponto) se um formato de e-mail está correto utilizando uma expressão regular.

Ótimo, já temos uma classe que podemos reutilizar e acrescentar validações. Uma dica, é sempre retornar um código para a mensagem e lembrar de adicionar o mesmo ao método getValidationErrorMessage para que seja possível obter a mensagem correta.

O componente

Agora, precisamos de mostrar essas mensagens de uma forma fácil e reutilizável. Para isso, iremos criar uma diretiva similar ao ng-messages, que recebe como parâmetro um controle de formulário (FormControl) e exibe os erros (caso existam) desse determinado controle.

Como utilizar

Após termos criado nossas validações e a diretiva para mostrá-las, só nos resta utilizar tudo no formulário que criamos.

Para isso, criamos uma página simples definindo nosso formulário e utilizando o FormBuilder para declarar quais as validações devem ser realizadas para cada componente.

Obs: Aqui, utilizo um exemplo em Ionic, ao contrário do post original

E por fim, nosso HTML final :

Conclusão

Utilizando o FormBuilder, nosso formulário em HTML fica bem simples, focando apenas na apresentação e identificando os inputs/controles utilizando a diretiva ngControl.

Show your support

Clapping shows how much you appreciated Lucas Ricoy’s story.