ngMessage – Passo a Passo – Como validar formulários usando AngularJS com ngMessage – Parte 3 – Faixa Bonus

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

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.

Após apresentado o segundo vídeo da série Vídeo 2, agora é a vez do terceiro e último vídeo que vou chamar de faixa Bônus. Nesta faixa bônus vou tratar de 3 assuntos.  Primeiro vou explicar passo a passo como exibir a mensagem de erro apenas após o usuário clicar no botão Submit, em seguida vou explicar passo a passo como exibir a mensagem de erro apenas após deixar o foco de cada campo e por último vou explicar como implementar um novo tipo de validação, uma das facilidades para quem trabalha com ngMessage.

Espero que gostem deste último 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/

Vídeo sobre Json-Server: https://www.youtube.com/watch?v=nqExK134co4

Primeiro vídeo da série ngMessage: Vídeo 1

Segundo vídeo da série ngMessage: Vídeo 2

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

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

Canal youtube: youtube.com/+sw9brl