Angular 2 – Máscara de entrada de dados (input mask) com diretivas

Curso básico gratuito de Angular 2 | kazale.comO objetivo dessa aula é demonstrar como criar uma máscara de entrada de dados (input mask) com o Angular 2.

 

Digite seu email para se inscrever em nossa newsletter e receber atualizações sobre novos conteúdos.

Ao término dessa aula você aprenderá como criar uma máscara de entrada de dados (input mask) com o Angular 2.

1. Introdução

O input mask, ou máscara de entrada de dados é um recurso obrigatório ao se desenvolver uma aplicação.

Sempre temos a necessidade de formatar um CPF, CNPJ, CEP, data, e tal implementação no Angular 2 pode ser complicada a primeira vista, na verdade é necessário entender alguns conceitos antes de implementá-la.

Nos tópicos a seguir estudaremos esses recursos e veremos como a solução foi aplicada ao projeto template para Angular 2 com WebPack aqui da Kazale.com.

Caso você esteja utilizando um outro template para sua aplicação, o conteúdo estudado aqui, assim como o código do template, poderão ser adicionados com facilidade em seu projeto.

2. Solução

A primeira instância você poderia imaginar que bastaria registrar eventos de ‘Key Up’ (quando uma tecla é pressionada) para aplicar a formatação dos dados desejada, o que está parcialmente correto.

Você deverá fazer isso, porém no campo de texto estará associado a um item NgModel, que também precisa atualizado, e para isso precisamos acrescentar um passo a mais em nossa solução.

A solução para intermediar a entrada e formatação de dados e a atualização do NgModel, será utilizar um recurso do Angular 2 chamado ‘Control Value Accessor’.

Basicamente teremos uma diretiva de atributo que implementará a interface ‘ControlValueAccessor’, e assim conseguiremos através da diretiva criada para a formatação dos dados, ter acesso ao objeto NgModel que compõe o campo de texto de entrada de dados.

3. Diretiva (directive)

A base da solução será utilizar uma diretiva de atributo, que será adicionada a um campo de texto HTML, e será responsável pela formatação dos dados e atualização dos valores no NgModel.

A diretiva (directive) é um componente representado pela anotação ‘@Directive’, e diferentemente da anotação ‘@Component’, ela pode ser adicionada como atributo a um elemento HTML ao invés de criar um novo elemento HTML.

A diretiva criada para a máscara nesse exemplo chamará ‘kzMask’, será associada como atributo a um campo de texto HTML da seguinte forma:

A definição básica da diretiva que criaremos será:

Reparem como sua criação é igual a de um componente.

4. HostListener

Com nossa diretiva criada, precisamos atribuir o controle de eventos a ela, que em nosso caso será o ‘Key Up’ (quando pressionamos uma tecla), e o ‘Blur’ (quando mudamos o foco do campo de texto).

O ‘Key Up’ será utilizado para formatar o valor a cada caractere digitado, e o ‘Blur’ será utilizado para verificar o valor quando perder o foco sobre o campo de texto.

No Angular 2 adicionamos tais eventos através da anotação ‘@HostListener’, que deverá ser aplicado ao método responsável pelo código relacionado ao evento.

Veja no código abaixo como os eventos são adicionados ao código da diretiva:

Reparem no código acima que que a anotação ‘@HostListener’ recebe dois parâmetros, o nome do evento (keyup, blur), e um objeto ‘$event’, que contém dados do evento, como por exemplo o código do caractere digitado, o que é muito útil em algumas ocasiões.

5. ControlValueAccessor

Agora que sabemos como criar a diretiva e manipular os eventos, precisamos acessar o ‘NgModel’ associado ao campo de texto, para isso utilizaremos o ‘ControlValueAccessor’.

Através da implementação da interface ‘ControlValueAccessor’, temos acesso ao método ‘onChange’, responsável por atualizar o ‘NgModel’, então basta chamarmos esse método para atualizar seu valor.

Mas para que esse código funcione, precisamos informar que a diretiva possui tal característica, e isso se dá através do registro do provider ‘NG_VALUE_ACCESSOR’ na anotação ‘@Directive’.

Veja a seguir o código da implementação:

Com essa implementação temos o acesso ao ‘NgModel’ ao chamar o método ‘onChange’ da diretiva.

6. Implementação completa

Abaixo segue a implementação completa da diretiva, incluindo a lógica para formatar os dados com base na máscara passada como parâmetro, seguindo o padrão adotado na maioria das implementações, que consiste na utilização do número nove como base:

Abaixo alguns exemplos de utilização:

Reparem que o valor da máscara é obtido na diretiva com a utilização da anotação ‘@Input’.

No template para Angular 2 com WebPack você também poderá encontrar uma diretiva para valores monetários, que segue o mesmo princípio explicado acima.

O código da diretiva de valores monetários pode ser encontrado aqui.

7. Conclusão

Como você pode perceber, através de uma diretiva, eventos e ‘ControlValueAccessor’, foi possível implementar uma solução para adicionar máscara a campos de textos.

8 comentários em “Angular 2 – Máscara de entrada de dados (input mask) com diretivas

  1. Funciona para inserir os dados, mas no model biding em um formulário para editar dados ele não exibe o valor. Saberia informar como contornar esse problema. Desde já muito obrigado.

    1. Olá Pedro,

      os dados não voltar formatados porque a máscara armazena os valores sem a máscara, que na maioria das vezes é mais conveniente.

      Nesse caso você terá que aplicar uma formatação nos dados ao carregá-los, antes do bind ser executado, ou você pode fazer uma alteração no código da máscara para armazenar os valores formatados.

      1. O problema não é a formatação, é que quando busco os dados, todos os campos que usam a máscara não são exibidos no formulário de edição.

    1. Olá Willian,
      faltava implementar o ‘writeValue’ na diretiva de máscara, fiz a alteração e agora está funcionando corretamente.
      Atualize o código para a versão mais atual que funcionará sem problemas.

      1. Boa tarde, obrigado pelo código. Porém copiei exatamente como está aqui na página e quando carrego os dados do servidor os campos que tem máscara não são preenchidos. Alguma sugestão?

        1. Olá Yves,

          fiz algumas alterações no código da diretiva do template para corrigir esse erro, o ideal seria você obter a última versão do template disponível no repositório GitHub.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

nove − 1 =