Curso Angular 2 – Aula 6: Formulário (Validação)

Curso básico gratuito de Angular 2 | kazale.comO objetivo da aula 6 é ensinar como criar validações de formulários 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á a validar dados de entrada em formulários com o Angular 2.

1. Definição

Validar os dados de um formulário á imprescindível, e exitem dois tipos de validação, a validação cliente e servidor.

A validação no servidor ocorre quando os dados chegam ao nosso servidor para serem processados, e obrigatoriamente eles devem ser validados para garantir a integridade dos dados, e ao mesmo tempo garantir a segurança da aplicação.

A validação no lado do cliente acontece ainda no navegador do usuário, e é a validação que focaremos nesse artigo. Embora a validação no lado do cliente não seja obrigatória, é preferível sempre fazê-la para evitar chamadas desnecessárias ao servidor para o processamento de valores inválidos.

O principal motivo entre a obrigatoriedade de se ter a validação no servidor e não no cliente, é que a validação no cliente pode ser burlada, visto que ela é executada no navegador e é basicamente criada em JavaScript.

O Angular 2 possui uma série de recursos nativos implementados para facilitar a validação dos dados, e esses recursos que estudaremos nesta aula.

É importe salientar que a validação de formulários no Angular 2 utilizando seus recursos nativos, pode variar e ser implementada de modo diferente do mostrado aqui.

Por fim, é importante ressaltar que o Angular 2 possui melhorias quando comparado com o Angular 1 no quesito validação, pois o Angular 1 era limitado e poluía muito o HTML com o uso de diretivas, o que não ocorre com o Angular 2, conforme veremos.

2. Configurando o Componente do Formulário

O Angular 2 permite mapear e controlar o formulário em um componente, o que ao contrário do Angular 1, deixará nosso HTML bem mais enxuto e fácil de interpretar.

O mapeamento é feito utilizando duas classes do Angular 2, o FormBuilder e o ControlGroup.

O ControlGroup terá uma referência do nosso formulário, e será utilizado em conjunto com a diretiva ngFormModel para isso. Ele conterá todas as configurações de validação e regras do formulário.

Já o FormBuilder, será a classe que utilizaremos para criar as regras de validação do formulário a serem adicionadas ao ControlGroup.

O código abaixo implementa em nosso FormAlunoComponent o uso de ambas classes:

Repare que criamos um atributo do tipo ControlGroup em nosso componente, chamado ‘alunoForm’, assim como adicionamos o parâmetro ‘fb’ do tipo  FormBuilder em nosso construtor.

Ao adicionarmos o parâmetro ‘fb’ no construtor do componente, o Angular 2 através de seu mecanismo de injeção de dependências, providenciará e injetará esse recurso automaticamente em nosso componente, bastando utilizá-lo.

Uma vez que tenhamos o FormBuilder em mãos, chamamos um método auxiliar para gerar o ControlGroup contendo as regras de validação, conforme encontrado no método ‘buildForm’.

O método ‘buildForm’ chamará o método ‘group’ do FormBuilder, e nele adicionaremos os validadores necessários para os campos a serem validados em nosso formulário.

No exemplo acima apenas utilizamos validadores nativos do Angular 2, como o Validators.required, mas veremos mais adiante no artigo como criar nosso próprio validador.

No bloco de código a seguir, criaremos um método utilitário responsável por retornar se existe algum erro de validação. Esse método será utilizado em nossa view para controlar se as mensagens de erro devem ou não serem exibidas.

Basicamente o que o código acima faz é iterar sobre nossas regras de validação e checar pelos valores ‘valid’ e ‘pristine’ para retornar se os dados são válidos ou não.

O parâmetro ‘valid’ como o próprio nome diz, apenas valida se o dado está correto, porém o valor ‘pristine’ pode ser novo para você.

Pristine significa um estado em um campo do formulário, e esse estado é o de que ele ainda não foi editado. Checamos esse estado porque não queremos que a mensagem de erro seja exibida sem ao  menos o usuário ter alterado o seu valor.

*Quando um campo e alterado ele passa para o estado ‘dirty’, que não utilizaremos em nosso formulário, mas poderá ser util caso queira utilizar uma outra abordagem de validação para seu formulário.

3. Configurando o HTML do formulário

Agora que já implementamos as funcionalidades no componente do nosso formulário, vamos adicionar os controles necessários em nosso HTML.

Para isso adicione o código as seguir:

O primeiro código destacado adiciona uma caixa de alerta no topo da página, e exibe todos os erros de validação existentes. Reparem que usamos juntamente com a diretiva ngIf o método ‘hasErrors’ criado no final da aula, assim a caixa de alerta somente será exibida se pelo menos um erro existir.

Em seguida atribuímos a diretiva ngFormControl ao nosso formulário (tag form), e passamos ‘alunoForm’ definido em nosso componente como parâmetro.

Para efetuar o bind entre os componentes do formulário e o componente, adicionamos a diretiva ngModel, passando o nome do atributo definido no componente.

Depois disso devemos adicionar a diretiva ngControl para cada componente do formulário que definimos uma regra de validação, assim o Angular 2 saberá aplicar tais validações quando os valores forem modificados.

Para deixar o visual do formulário mais interessante, um último controle foi adicionado aplicando um classe do Bootstrap no componente sempre que existir um erro de validação. Essa classe destaca que o componente apresenta um erro.

O comando [class.has-error] em conjunto com uma expressão que retorne verdadeiro ou falso, exibe ou omite a classe CSS no componente HTML, que no caso seria a classe ‘has-error’. A expressão passada no exemplo acima verifica se o valor do componente é válido e se ele já foi modificado pelo usuário.

Por último usamos o atributo ‘valid’ do ControlGroup ‘alunoForm’ em conjunto com a atributo ‘disabled’ do botão de submit para habilita-lo ou não.

4. Criando um Validador

Agora que já temos o formulário funcionando, vamos criar um validador personalizado, que em nosso caso será para validar email.

Para isso criamos um novo arquivo que conterá um classe. Essa classe deve conter um método estático chamado validate, que recebe como parâmetro um atributo Control, e que retorne um objeto no formato JSON composto por uma string, que no caso é o nome do componente validado, e um valor booleano.

Com isso basta implementar o método com a lógica necessária para saber se o valor é válido e retornar ‘null’ caso válido, ou o objeto JSON descrito acima caso inválido.

Segue abaixo código da implementação:

O código acima valida o email com base em uma expressão regular, retornando ‘null’ caso válido, ou o objeto JSON caso inválido.

Com o validador implementado, o que temos que fazer é adicioná-lo ao nosso FormBuilder, conforme destacado no código abaixo.

Assim o Angular 2 saberá quando executar o método ‘validate’ sempre que o valor do componente HTML for modificado.

Clique para fazer o download dos arquivos do template base da aula 6.

Clique para fazer o download dos arquivos do projeto completo desenvolvido na aula 6.

13 comentários em “Curso Angular 2 – Aula 6: Formulário (Validação)

    1. Oi Francisco,

      que bom que esteja gostando e aprendendo com o curso!

      A aula 9 será somente sobre rotas.

      Nesse curso não falaremos sobre o “Angular cli”, mas pretendo abordar esse assunto em posts futuros ou em um novo curso.

  1. Kazale, parabens. Estou gostando muito das aulas. Recentemente, ontém, creio foi lançada a RC5, eles implementaram algo com “NgModule” que deu uma outra forma de iniciar a aplicação e também o método “bootstrap” ficou obsoleto. Achei meio estranho. Quem sabe não pudesse fazer um vídeo curto nos explicando isso?! As aplicações agora da forma como foram construídas, se não migradas, parecem não mais funcionar. Abraço, obrigado.

    1. Olá Wilson,

      a base do nosso código, digo componentes, serviços, models, views não irão mudar, mas com os lançamentos de novos releases teremos que partir de um projeto atualizado para o novo padrão e mover todos esses arquivos de projetos antigos para que ele funcione.

  2. KAZALE IT Boa noite !!!!
    Antes de mais nada ótima video aula!!!
    Cara agora pintou uma dúvida, fiz o upgrade para angular 2 v4, porem não tem mais a classe Control no pacote Common.
    Dessa maneira, como devo fazer para criar os validadores?!!?
    Muito obrigado pela atenção

Deixe uma resposta

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

12 − doze =