Top Posts

selectOneMenu JSF com BD

Continue lendo

Série AngularJS: Advanced Form

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

0

olá Pessoal,

No post de hoje vamos ver como brincar um pouco mais com AngularJS e formulário. Com AngularJS tudo é mais simples e tudo que já faziamos pré mundo AngularJS funciona com muita naturalidade. Os exemplos mostrados aqui estão no meu Github no repositório do workspaceAngularJS o arquivo com o exemplo é o advancedform.html

lets go…

Usando checkbox

Está precisando um checkbox para o seu formulário? É bem simples. Veja o código a seguir:

Opção 1

 

Opção 2

 

Na opção 1 quando checked o valor do bind para o nosso objeto será um boolean. Já na opção dois queremos gravar uma string.

advancedformcheckbox
Criando um radio input

Para criar um radio, é bem simples também, nada de especial o próprio explica tudo:

 

advancedformradio

Quando clicado o valor que passamos para o objeto é M ou F.

Criando um Simples SelectOne

Vamos ver como fazer um selectone com String:

 

Observe que estamos passando string para o value o ng-selected sendo tratado como String. O resultado é conforme a seguir :

advancedformselect
Agora se queremos que não seja uma string e objetos ou melhor uma lista ? Dai temos que usar o ng-options ao invés do ng-selected, vamos ver:

 

O ng-options é bem simples, informamos qual atributo queremos exibir de cada item do array. No controller criei um array assim:

 

advancedformngoptions

 

advancedformngoptionselected

Observe que o select fica vazio quando carregado, vamos colocar uma mensagem, então dentro de <select /> coloque:

 

advancedformnoselect

Mostrando validações de erros no form

Vamos dizer que queremos validar um campo, quando o usuário digitar. Podemos fazer isso facilmente. Antes disso é preciso entender apenas um conceito importante que temos no Angular que é o ngModelController.

O ngModelControler é responsável por gerenciar o data binding entre o valor passado com o model (ng-model). E assim ele faz o track com a view se é valido ou não, e se o input tem sido modificado. No exemplo a seguir vamos validar um campo e-mail, veja o código:

 

Observe que no ng-show passamos o campo e o tipo de validação. Agora no controller vamos criar a função que faz o tratamento :

O resultado será conforme a seguir:

advancedformshowvalidationemail

Informando que o campo é requerido. Agora vamos ver quando o formato do e-mail for inválido:

 

advancedformshowvalidationformat

E quando for válido:

advancedformshowvalidationvalid

E para finalizar vamos aprender a reusuar componentes de formulário em outro, ou seja, composite. É bem simples.

Primeiro Passo é criar o formulario que será reutilizado usando ng-template assim:

 

 

Passo 2

É criar o formulario normal e adicionar o composite:

 

Observe que apenas damos um nome para o nosso composite e no ng-include, chamamos ele.
O resultado:

advancedformnginclude

Exemplo Live

http://plnkr.co/edit/fW44yi
E por hoje é isso, eu espero que tenham gostado das dicas do post.
Vou ficando por aqui.

See ya!!

Related Posts with Thumbnails

Write a comment