Blog

Retrospectiva 2014

2014_3

olá Pessoal,

Como todo ano faço sempre uma retro. Esse ano não será diferente. Vamos lá?

Retrospectiva 2014

Esse ano foi de fato desafiador. Desafios a cada dia foi o que não faltou. Paro e olho para os outros 11 meses tenho história para cada um deles seja superação pessoal como profissional. Particularmente a única coisa gosto no final do ano é vc ter esse tempo para fazer uma reflexão na sua vida e como  foi esse  “1 ano” que teve e que jamais vai voltar, pois o tempo é irreversível.

E as metas que fizemos no final de 2013?

É eu posso dizer que esse ano foi um dos pontos que pouco dei atenção aquelas famosas listas, tabelas que fazemos com o que queremos atingir.Simplesmente eu tinha um plano, mas havia outro e que não estava nada alinhado com o que estava ali no papel e tive que me adaptar, entender e seguir em frente. Aprendi que ter metas mais curtas que permitam trazer maior valor para sua vida é melhor que ter aquelas metas de médio e longo prazo que muitas vezes passam a ser incertas. E vc se perde no meio do caminho e quando menos espera perdeu o foco. Então tudo que escrevi para em 2013 para 2014  joguei fora e comecei uma nova historia com metas mais simples e atingiveis. O fato de ser simples não quer dizer que é fácil. Ser simples pra mim, é ser objetivo e saber exatamente o que quer no final. Certamente quando temos metas complexas é pq nosso objetivo com aquilo não está bem definido.

 E o profissional?

Esse ano profissionalmente posso considerar como um dos melhores que já tive. Realmente muito aprendizado, dedicação e persistência. Há 1 ano e meio deixei o mundo corporativo nas multinacionais e me dediquei ao empreendorismo (pela terceira vez, após ter fracassado 2 vezes anos atras) e por uma naturalidade além do projeto inicial que é a ITSLabs, onde somos uma espécie de aceleradora para start-up, buscamos projetos que resolvem problemas de verdade para o mercado, sociedade e ajudamos investindo junto com o empreendedor permitindo que a ideia saia do papel e entre em operação de maneira sólida.Até desenharmos esse modelo quebramos muito a cabeça e cara também. Mas, trabalhamos bastante, tanto que não conseguimos ter o nosso site. E aprendi quando você não tem tempo para fazer o seu back-office significa que está bom, pelo menos acredita que o tempo usado foi para fazer novos negócios, pelo menos por aqui foi assim. Com todo esse envolvimento nasceu a Usecash que é um novo meio de pagamento através do troco, que antes se chamava itroco, mas após estudos de mercado e estrategia mudamos o nome. E isso tudo nos gerou dois negócios que não estava no plano, mas que nos proporcionou uma grande experiência, conheci executivos que jamais imaginei conhecer ou até almoçar.Colocamos no ar a ideia da Gabriela fundadora do DiveDoo, primeira cliente da ITSLabs (no novo modelo de negócio). E antes de terminar o ano fechamos mais 2 novos projetos para 2015. Ufa! A pergunta é quanto vale tudo isso? Não é possível detakgar  o que tem nesse ciclo, aqui é tudo resumido, mas é um desafio diario, que tem inicialmente mais dias “ruins” que “bons”. Porém, os dias ruins te levam a novos caminhos e soluções.

Ter participado do TDC  foi algo sensacional, curto o evento há muito tempo e ter contribuindo é algo  que não consigo mensurar.

O pessoal?

Do lado pessoal, tirando a falta de tempo para ficar com minha familia, onde tem sido algo bem limitado e pontual.Afinal eu moro em SP e eles na Bahia. Acredito que meus desejos pessoais estão bem. Dizem por ai que devemos ter profissional x pessoal. Eu particularmente, não consigo separar essas diferenças de desejo. Eu entendo que estão interligados e servem como ponto de equilibrio. Se vc tem esses dois mundos separados acredito que há alguma coisa não bem definida no que vc faz. E como disse é preciso ter o equilibrio e unir os dois para que seja um só. Senão, gera infelicidade. E aprendi muito bem fazer esse equilibrio, apesar da agenda cheia, as oportunidades surgem e vc deve aproveitar. Se hoje surgiu um espaço para ir ficar com a familia ou sair com os amigos e nem que seja por um limite de 2-4 hrs, vá e faça. Se tem esse espaço, é pq é preciso ser feito para ter o equilibrio necessário entre os dois mundos pessoal & profissional.

E o blog?

Eu digo que não foi um ano como gostaria para o blog camilolopes.com.Com o aumento de trabalho e alteração das prioridades devido a prazos etc. E trabalhando media de 20hrs/dia foi dificil arrumar um espaço para escrever um post como gosto. Não adianta sair escrevendo, é preciso pensar, refletir, validar se faz sentido etc. E quando eu escrevo tem diversos fatores por tras tais como sentimento, motivação, empolgação etc. É preciso unir tudo isso para transmitir o que deseja de maneira simples que possa agregar na vida de quem for ler o post. Espero que em 2015 eu consiga melhorar um pouco a frequência de publicação, dificilmente será como antes, onde tinha uma média de 3 posts novos por semana. Isso sei que não é mais possível, mas pelo menos 1 post por semana é meu desejo.

E aqui vai um resumo:

1. AngularJS:Nossa aqui foi animal, venho aprendendo AngularJS desde meados de 2013. E resolvi compartilhar cada aprendizado que ia tendo com o framework  no formato de série.  Hoje com dois projetos em produção tenho bastante coisa que ainda não coloquei no ar,  mas espero que em 2015 consiga.

2. Série Scrum:Vimos uma série de posts sobre Scrum, mas nada explicando o que é o framework, isso já tem na internet há 10 anos.Resolvi compartilhar a nossa experiência no dia a dia e problemas que tivemos e como resolvemos.

3. TDC 2014:Tive o prazer de participar da edição 2014 e espero participar no próximo ano. Foi excelente compartilhar a experiência da ITSLabs com projetos remoto  usando Scrum. Rola ou não rola?

4. UseCash: Conheça o novo meio de pagamento que vai mudar a forma de você carregar o dinheiro. Não se trata apenas de uma nova bandeira como opção de pagamento, e sim um novo conceito de como gerenciar o dinheiro com segurança.

5. ITSLabs  – Github:Temos o nosso repositorio no Github com projetos que achamos importante compartilhar com a comunidade. Inclusive criamos archetype maven para Java + AngularJS.

6. EasyJavaDropbox: Na ITSLabs criamos uma framework EasyJavaDropbox que nos permite usar mais facilmente o dropbox em projetos Java. Fiz alguns posts explicando o uso. Temos planos de evoluir API em 2015 .

Aproveitei o recesso do final do ano e já comecei a escrever alguns drafts. E no ano de 2015, pretendo ter alguns posts não técnicos, voltado para area de empreendorismo, compartilhando um pouco a minha experiência com vocês, muitos falam e ostentam, mas vamos ver o dia a dia como é? Muitos tem vontade de empreender, poucos tentam e dizem que é coragem. Mas, eu digo é coragem que precisamos mesmo? Eu aprendi que coragem apenas não é suficiente, há outros fatores importantes e que vc pode saber deles ainda quando está empregado e tem o empreendorismo como “vontade”. É disso que pretendo falar, trazer o dia a dia, nada de dicas tais como “como empreender?” ou “como abrir o negócio do zero e ganhar $$$”. Isso já está lotado na internet. Vou tentar trazer o que poucos falam.

Aprendizado e as lições

Não é possivel listar todas as lições de 2014, pq são mais de 365 lições. Porém, tem aquelas que marcam e se repetem muitas vezes durante o ano com intensidades diferentes. Mas, vou listar algumas:

1. Acreditar: Seja o que for, por mais dificil que seja a situação, acredite que tudo é passageiro, nada dura para sempre.Só acredite que vc terá a capacidade de resolver;

2. Você vai está sozinho: Os seus problemas é você que resolve. Não adianta, querer transferir para alguém. Ele volta pra vc. Pois, é o único com capacidade em achar a solução. E nisso tire um aprendizado.

3. Você não é melhor que ninguém: acredite não importa quanto tem na sua conta, que carro vc anda. Você não é melhor que ninguém nesse mundo. A sua vida pode mudar em questões de minuto e tudo que vc considera essencial e material, não terá nem 1/3 do valor que pagou. Então, aprenda a viver com as diferenças e olhe para o que as pessoas são e não o que elas tem.

4. Ajude as pessoas: parece piada isso ou campanha para ONG. Mas, não é.Ir para o trabalho, tirar o carro da garagem e ter um trocado para o chop na sexta-feira, parece algo normal, mas isso para você.Há pessoas nesse momento lutando pela vida a cada minuto, que não precisa de muito, mas que o pouco de cada um pode mudar a vida dessas pessoas. Eu confesso que nunca me interessei muito nesse mundo das ONGs. Mas, esse ano meu sentimento e pensamento mudaram. Não pq alguém que trabalha em uma ONG me fez mudar, pq conheci pessoas que dependem dessas ONGs para sobreviver e quando olhei para o meu lado e vi o que já havia conquistado e nunca devolvi aquilo para a sociedade, não me senti bem. Não tenho religião, apenas acredito que há um Deus, seja qual for ele. E acredito, que o mesmo tem mudado minha vida e me deu oportunidade de rever meus conceitos. Esse é um dos meus objetivos de vida com o empreendorismo, pois foi onde vi a oportunidade que posso ajudar e mudar as vidas das pessoas. Dinheiro é importante, porém é limitado e deve ser consequência na sua vida.

E para 2015?

Ainda não fiz planos, não escrevi no papel nada daquilo que vamos ver ai nos jornais nos próximos dias. Porém, em termo simples de ser, é evoluir o que foi consquistado em 2014, ter aprendido com os erros e saber quer novos estão a caminho. Porém, saber levantar é o que mais importa.E claro quero blogar de maneira aceitável aqui e não deixar que as aranhas tomem conta do blog :). Ah! Não posso esquecer de publicar meus dois livros que estão no forno. Um sobre AngularJS e outro mais voltado a quem deseja empreender e vou contar os bastidores.

Agora  a minha pergunta e o seu 2014 como foi? E para 2015?

abraços e quero agradecer à todos vocês por acompanhar o blog, mandar emails. Se não fosse cada uma dos leitores e seguidores que tenho hoje, acredito que não teria chegado aos 7 anos de blog.

Série Continuous Integration: Clonando workpace no Jenkins

jenkinslogo

olá Pessoal,

O post de hoje vamos ver como clonar um workspace de um outro job. Mas, você pode está se perguntando, pq eu fazer uma clone de workspace? Para responder a pergunta vou apresentar um cenário e ai você entende o motivo.

lets go…

 Instalando o plugin

Vamos instalar o plugin que permite clonar o workspace no Jenkins em manage plugins procure por: Clone Workspace SCM Plug-in e instale o plugin.
O cenário

Por que eu deveria clonar um workspace? Na verdade o que seria clonar o workspace?

vamos lá. Clonar um workspace nada mais é que copiar o conteúdo de um workspace para outro. Mas, pq eu faria isso? para não ter que baixar o projeto novamente e usar o do último build. Nos projetos aqui na empresa temos vários jobs por exemplo: compile >> tests >> build >> deploy

Da esquerda para direita, o primeiro job é o que verificar se houve mudança no repositorio remoto e em caso positivo começa o build. Os demais projetos, não podem verificar no repositorio repositorio remoto, apenas usam o código baixado para executar o que foi definido no job. E ai que entra a vantagem de fazer clone do workspace, caso o job compile passe, podemos copiar o workspace.Eu já cometi o erro de não fazer isso, e simplesmente pegar o código do repositorio no proximo step do Jenkins, mas é um risco grande do código que foi executado no primeiro job, não ser mesmo o que está no segundo ou nos posteriores, pois se algum código foi enviado para o repositorio remoto nesse intervalo os próximos job vão fazer o checkout. E para evitar isso é melhor copiar o workspace.

Na prática

No projeto inicial, precisamos dizer que se o build passar, ele deve permitir que o workspace seja clonado. No meu caso é o job que chamei de compile que vai fazer isso:

jenkinscloneworkspace

Agora no segundo job que é tests, vai copiar o conteúdo do workspace do projeto compile:

jenkinsourcecodecloneworkspace

Observe que no source code informei que o código vem de outro workspace e não do git, svn etc.
Build

Agora build o projeto inicial(compile) e depois o próximo projeto(tests) e veja que o workspace foi copiado.

Simples não?

vou ficando por aqui e espero que tenha gostado do post.

abracos, see ya!!

Série AngularJS: Validando Formulário

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

when("/validationform", {
templateUrl : "formvalidation.html",
controller : recipeController}).

//restante do code omitido

 

Step 2 – Criando uma função no Controller

Vamos criar uma função bem simples no controller

var recipeController = function($scope, UserService) {
//codo omitted

$scope.send = function($scope){
alert("send");

}

};

 

Step 3 – Criando o formulário

Agora vem o nosso formulário. Veja:

<form name="mainForm" ng-submit="send()">
<div>
<label>Nome</label>
<input type="text" ng-model="user.name" name="username" required/>
<span ng-class="error" ng-show="mainForm.username.$error.required">Nome é obrigatório</span>
</div>
<div>
<label>email</label>
<input type="email" ng-model="user.email" name="useremail" required/>
<span ng-class="error" ng-show="mainForm.useremail.$error.required">Email é obrigatório</span>
<span ng-class="error" ng-show="mainForm.useremail.$error.email"> Formato do e-mail é inválido</span>
</div>
<div>
<label>Idade</label>
<input type="number" ng-model="user.age" name="userage" required ng-maxlength=2 ng-minlength=1>
<span ng-class="error" ng-show="mainForm.userage.$error.maxlength">Não é permitido mais que 2 digitos</span>
</div>
<div>
<label>Blog/Site</label>
<input type="url" ng-model="user.site" name="usersite" ng-maxlength=30>
<!-- the message only show when the form is validated-->
<div ng-show="mainForm.usersite.$dirty && mainForm.usersite.$invalid">
<span ng-class="error" ng-show="mainForm.usersite.$error.url">Url inválida</span>
</div>
</div>
<div>
<input type="submit" ng-disabled="mainForm.$invalid">
</div>
</form>

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.

<form name="mainForm" ng-submit="send()">

bloco nome

<div>
<label>Nome</label>
<input type="text" ng-model="user.name" name="username" required/>
<span ng-class="error" ng-show="mainForm.username.$error.required">Nome é obrigatório</span>
</div>

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

<div>
<label>email</label>
<input type="email" ng-model="user.email" name="useremail" required/>
<span ng-class="error" ng-show="mainForm.useremail.$error.required">Email é obrigatório</span>
<span ng-class="error" ng-show="mainForm.useremail.$error.email"> Formato do e-mail é inválido</span>
</div>

 

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

<span ng-class="error" ng-show="mainForm.useremail.$error.email"> Formato do e-mail é inválido</span>

 

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:

<div ng-show="mainForm.usersite.$dirty && mainForm.usersite.$invalid">

 

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

<div>
<input type="submit" ng-disabled="mainForm.$invalid">
</div>

 

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!!

Usecash:Você já recebeu balas como troco?

main-logo

Opa Pessoal,

O post de hoje vou falar de um novo Meio de Pagamento através do troco. Isso vai gerar outros posts, sobre empreendorismo, criação de MVP que vem mais na frente e na sequência. Portanto, conheçam o Usecash onde sou um dos fundadores.

Lets go…

Assistam e se divertam:

Coisas que Gostaríamos de Dizer – Bala de Troco 

https://www.youtube.com/watch?v=hbTU7sumJXg

Usecash

A pergunta é:

“Quem aqui já recebeu balas ou chicletes como troco?”

Levanta a mão, por favor. \o/.

Nada legal receber  balas como troco, sendo que você não pode pagar com balas na hora de comprar certo?(Segundo PROCON devolver troco em balas é Crime). É exatamente isso que o Usecash resolve, você agora pode receber seu troco de maneira virtual  informando apenas o CPF.  A seguir explico como vai funcionar.

Como vai funcionar?

É bem simples. Primeiro ponto que você não precisa ter um cadastro no Usecash para receber o troco, ao chegar no estabelecimento que aceita a bandeira Usecash, você fala:

 “olha, passa esse troco ai 0.03 no usecash”.

 Dai informe apenas o CPF e no caso  daqueles que não estão cadastrado terá que informar  o número do celular para receber o código de ativação via SMS. Mesmo sem ter ativado o cadastro você pode continuar recebendo troco, mas guarde o código de ativação enviado. Quando você estiver  em um belo dia com paciência acessa o site www.usecash.com.br   e através do menu “Quero Usar” na página inicial informe o código recebido e conclua seu cadastro em 20 segundos. Mas, se você já tiver cadastro, basta efetuar o login.

Ok. Camilo. Mas, e agora o que posso fazer com o troco acumulado?

Com o troco acumulado você pode fazer o que quiser, uma das opções é poder usar como meio de pagamento no próprio estabelecimento que recebeu o troco ou em qualquer outro que aceita Usecash. Já pensou pagar o pão ou happy hour com aqueles pequenos trocados que você vai perdendo durante a semana?Agora cada centavo faz a diferença. E o melhor de tudo, o pagamento é super simples, apenas informe seu CPF + senha cadastrada. E nada mais.  Levar cartão, carteira pra que?

Outras alternativas de como usar o dinheiro na conta Usecash é:

  •  Realizando doação;
  • Transferência para amigo (está devendo as cervejas da semana passada?);
  • Saque para a conta corrente do seu banco;
  • Os pontos acumulados, você pode vender, fazer compras  em estabelecimentos e em breve na Cash Store (nossa loja virtual com produtos e serviços para regaste dos pontos);

E por essa aqui você não esperava toda vez que você usar como meio de pagamento, vai ganhar pontos. Assim como nos cartões de crédito, a diferença que não somos burocráticos,  uma vez que você pagou a conta com Usecash, já recebe seus pontos e acabou. Pode vender, transferir fazer o que você quiser. Sem restrições nem carência de uso, afinal de contas os pontos são seus, não é?  Pense muito bem, antes de querer usar o cartão de débito, o que vc ganha ao usar? Nada. Cartão de crédito você ganha pontos e prazo, porém regastar esses pontos hoje é uma piada. Tudo bem é mais confortável, pq o dinheiro já está na sua conta e o cartão de crédito já tem o limite. Mas, quanto isso custa pra você? Cada vez que usa o cartão de débito, vc perde pontos no Usecash, que amanhã  poderia vender para seu amigo que vai precisar para uma viagem, pense nisso.

Posso colocar dinheiro na minha conta Usecash? Tomei uma decisão não uso mais cartão de crédito/débito prefiro usecash.

É uma pergunta comum. A respostá é:claro. Você poderá fazer uma recarga em qualquer estabelecimento ou se preferir  na própria plataforma no seu menu tem a opção de adquirir crédito. Feito isso você pode usar como quiser.

Daí você vai dizer. Camilo, vocês estão loucos, todo mundo está indo para o dinheiro de plástico e pq usar dinheiro papel?

Hoje 89% da população segundo o Banco Central em compras de até R$ 50.00 usam o dinheiro. Mas, não é só isso, há outros motivos como:

  • As taxas de cartão de crédito estão cada dia maiores para os estabelecimentos e isso impacta onde? Quem paga o valor da taxa? O estabelecimento? (você não acredita nisso né?);
  • Quando vc é assaltado e levam o cartão, simplesmente maior burocracia todo o processo pra se proteger;
  • Os programas de  pontos do cartão de crédito hoje,  não motivam mais como anos atrás. Cheio de restrições que vc desiste de tentar resgatar;
  • Alguns estabelecimentos chegaram e falaram:

“Com a taxa de 1% posso oferecer melhores preços para os meus clientes. Hoje tenho taxa do cartão + aluguel de máquina etc. A infraestrutura não tão barata como todos pensam.E ainda preciso ter mais de uma máquina”.

Conclusão

Essa é uma das vantagens do Usecash. Recentemente em uma discussão com um usuário ele trouxe:

“Poxa bacana, agora eu não esqueço mais o dinheiro das compras para minha diarista. Eu sempre esqueço, agora crio uma conta Usecash pra ela e transfiro, acabou. Ela vai no supermercado com CPF e senha e faz o pagamento”.

Lembrando que  o único serviço que cobramos taxa é o de 1% sobre o pagamento. Mas,cobramos do estabelecimento. Qualquer outro serviço é grátis (transferência, saque etc).

Aproveitando o espaço estamos buscando instituições sérias para fazer parte no serviço de receber doação. Vamos fazer uma seleção nesse caso, queremos ter instituições que realmente fazem um trabalho bacana adicionando valor na vida das pessoas. Então,se você conhece alguma e queira nos indicar, sinta-se à vontade, basta pedi pra eles acessar o site e mandar um email para a equipe de atendimento.

Ah o lançamento?

Agora em SETEMBRO/2014, se cadastre no mailing e vai ficar sabendo antes de todo mundo.

Facebook: https://www.facebook.com/usecash

Twitter: https://twitter.com/usecashOficial

Abraço, e vou ficando por aqui!!!

Série AngularJS: Advanced Form

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

<div>
<label>Role</label>
<!-- the value for user.admin is set to true if checkbox is checked -->
<input type="checkbox" ng-model="user.admin">
{{user.admin}}
</div>

 

Opção 2

<div>
<label>User Role</label>
<!-- the value is admin for object user.role when the checkbox is checked"-->
<input type="checkbox" ng-model="user.role" ng-true-value="admin" ng-false-value="user">
{{user.role}}
</div>

 

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:

<label>
<input type="radio" ng-model="user.sex" value="M"> Masculino
</label>
<label>
<input type="radio" ng-model="user.sex" value="F">Feminino
</label>

 

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:

<!-- Select input with String -->
<label>Sexo:
<select ng-model="sex">
<option value="M" ng-selected="sex=='M'">Masculino</option>
<option value="F" ng-selected="sex=='F'">Feminino</option>
</select>
Escolhida foi:{{sex}}
</label>

 

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:

<!-- select input with object -->
<label>Country
<select ng-model="countrySelected" ng-options="country.name for country in countries">
</select>
{{countrySelected}}
</label>

 

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

$scope.countries = [
{name:'Brazil'},
{name:'Australia'},
{name:'Canadá'}
]

 

advancedformngoptions

 

advancedformngoptionselected

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

<option value="">--No Selection--</option>

 

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:

<form name="userInfoForm">
<!-- call my function and field will be validated-->
<div class="control-group" ng-class="getCssClasses(userInfoForm.email)">
<label>E-mail</label>
<!-- we must inform name for field -->
<input type="email" ng-model="user.email" name="email" required>
<!-- will be show only if the format is invalid-->
<span ng-show="showError(userInfoForm.email, 'email')">
E-mail format is inválid. 
</span>
<span ng-show="showError(userInfoForm.email,'required')">
E-mail is required
</span>
</div>
</form>

 

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 :

//check if field passed is valid or invalid 
$scope.getCssClasses = function(ngModelController){
return{
error:ngModelController.$invalid && ngModelController.$dirty,
success:ngModelController.$valid && ngModelController.$dirty
};
};
$scope.showError = function(ngModelController,error){
return ngModelController.$error[error];
};

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:

 

<!--creating composite reusable components-->
<script type="text/ng-template" id="password-form">
<label>Password</label>
<input ng-model="user.password" type="password" required>
</script>

 

Passo 2

É criar o formulario normal e adicionar o composite:

<!--using composite -->
<form name="form1" novalidate>
<legend>User</legend>
<label>username</label>
<input ng-model="user.username" required>
<ng-include src="'password-form'"></ng-include>
</form>

 

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!!