ngMessage – Passo a Passo – Como validar formulários usando AngularJS com ngMessage – Parte 1

Olá a todos. Sejam bem vindos aos Canal e Blog SW9

Recentemente fiz uma enquete na Internet dando duas opções sobre qual tema (próximo tema)
gostariam de ver no meu canal e blog. As duas opções eram:

1- Construção de Testes Unitários usando Jest
2- Validação de formulários usando ngMessage

Bom, a grande vencedora foi a segunda opção. Portanto hoje começo uma nova série de vídeos,
agora para explicar passo a passo como utilizar o ngMessage para validar formulários web.

Esta nova série será composta de 3 vídeos. No primeiro vídeo vou instalar os requisitos necessários
para o nosso App em AngularJS, em seguida vou explicar passo a passo a construção do formulário de exemplo apresentando as opções de validação, template de mensagens e formas visuais de apresentar os erros.

No segundo vídeo da série, vou focar no controlador que vai receber a requisição do formulário,
verificar se o formulário é válido ou não e enviar os dados para serem salvos na API Fake Json-Server.

Como complemento vou mostrar como construir a funcionalidade de loading que aparece no botão de submit do formulário até que o processamento seja finalizado.

Já no último vídeo da série, que vou chamar de faixa bonus, vou apresentar duas forma diferentes de exibição dos erros e como construir novas validações para incorporar no ngMessage.

Bom, mas feita a apresentação, vou falar um pouco sobre o ngMessage. Apesar de termos outros componentes e recursos para validar um formulário usando a linguagem AngularJS, o ngMessage, na minha opinião, é o mais rápido e prático para se utilizar.

Na verdade o componente ngMessage é o componente oficial do AngularJS para se fazer validação de formulários.

Com apenas algumas configurações já podemos utilizá-lo, portanto a curva de aprendizado é baixa.

Em poucas palavras, o que precisamos fazer para começar a usar o ngMessage é:

1- Chamar a biblioteca na sua página principal (index.html, default.html, ou uma outra de sua escolha)
2- Incluir a diretiva [ngMessage] no módulo principal de seu App
3- Construir o formulário colocando as propriedades de validação para cada campo
4- Chamar a diretiva ngMessages em uma Div para apresentação dos erros

Importante: a diretiva ng-messages agrupa todos os erros do formulário ou de um cmapo específico.
Abaixo do ngMessages precisamos chamar a diretiva ng-message para cada erro que será exibido.

5- Por último também existe a opção de chamar a diretiva ng-message-include para chamar um template contendo todas as mensagens de erro padrão, desta forma reaproveitamos o mesmo código para qualquer formulário que formos criar.

Voce verá mais detalhes e o passo a passo da implementação nesta nova série de vídeos. Como de costume, deixarei um link para baixarem o código fonte em minha área de downloads.

Espero que goste deste primeiro vídeo. Aproveito para pedir a participação de vocês no canal e blog, curtindo, compartilhando, dando sua opinião e se inscrevendo no canal e blog para receber as novidades em primeira mão.

Fiquem com Deus e até o próximo vídeo.

Links

Código Fonte: http://blog.sw9.com.br/acesso-area-de-downloads/

Meu Blog: http://blog.sw9.com.br

Meu GitHub: https://sw9brl.github.io/MyGitHubPage

Canal youtube: youtube.com/+sw9brl