Top Posts

Como anda seu curriculo?

Continue lendo

Série AngularJS: Validando Formulário

Posted by camilolopes | Posted in AngularJS | Posted on 09-11-2014

0

angularjslogoA

Olá Pessoal,

Hoje vamos ver como customizar mensagens de validação em um formulário com AngularJS. Será uma simples validação. Para algo mais específico precisamos criar diretivas. Por exemplo, validar se o username é unico. Tem que criar uma diretiva que faça essa validação para poder exibir uma mensagem no formulário. Não vamos entrar nesse cenário aqui, pois já seria um novo post.

Lets go…

Github

O exemplo vai estar no projeto receipeangularexample no meu github

https://github.com/camilolopes/workspaceAngularJs
Development

Vou assumir que você já tem a configuração básica do AngularJS. Para o exemplo usarei rotas/deep linking para acessar o conteúdo.

Step 1 – Configurando a rota

 

Step 2 – Criando uma função no Controller

Vamos criar uma função bem simples no controller

 

Step 3 – Criando o formulário

Agora vem o nosso formulário. Veja:

Entendendo o Código

Claro que precisamos entender o que o código faz. Focarei apenas no que é importante, ou seja, não preciso explicar o que um atributo required no campo input faz.

Primeiro ponto

Ter um nome para o formulário, sem um nome nada adianta entender o restante do código. É através dele que vamos acessar os campos.

No campo input temos que dar um name para o nosso campo e estamos dizendo que ele é required e qual mensagem deve ser exiba. Se não fizermos isso será a mensagem default HTML 5. Na linha span estamos dizendo: “exiba esta mensagem se o campo username for inválido”, ou seja, se não tiver nada digitado vai exibir essa mensagem por padrão, como vimos na imagem anterior.
bloco email

 

Fizemos a mesma coisa do campo nome, a diferença é que aqui temos um campo do tipo email que valida o formato do e-mail, se este for inválido exibe a mensagem que colocamos na validação

 

O objeto $error que estamos usando contém todas as validações para um específico formulário, que no nosso caso chama-se mainForm.

Lembrando que a estrutura é nomeDoForm.nomePropriedade.$error.attributo ou nomeDoForm.expression.

Para o bloco idade nada de diferente, então nem preciso explicar.

Bloco Site

Aqui estamos validando a url e para isso temos o type url ja no HTML 5.Mas, observe a diferença que a mensagem somente é exiba quando o campo é modificado, ela não aparece quando a página é carregada, como fizemos nos outros campos, isso devido a essa linha aqui:

 

Ela está dizendo: “se o campo usersite for modificado e inválido, exiba o conteudo desse bloco” que no nosso caso temos a mensagem “Url inválida.

$dirty retorna true se o campo foi modificado

Bloco botão submit

 

E para garantir que o usuario nao vai submeter o form, vamos desabilitar o botão submit se o formulário é invalido, ou seja, se todos os requisitos não são atendidos esse botão fica disabled

Testando

angularformvalidationempty

 
angularformvalidationinvalid
Por hoje é isso, vou ficando por aqui e espero que tenham gostado do post.

abracos, see ya!!

Related Posts with Thumbnails

Write a comment