Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Rodrigo Branas – @rodrigobranas - http://www.agilecode.com.br
Validando Formulários
com AngularJS
“Transformar equipes de desenvolvimento de software”
http://www.agilecode.com.br
Rodrigo Branas
rodrigo.branas@agilecode.com.br
http://www.agilecode.com.br
• Desenvolvendo Software na Gennera
• Criando t...
Certificações
Formação Acadêmica
Ciências da Computação – UFSC
Gerenciamento de Projetos - FGV
SCJA, SCJP, SCJD, SCWCD, SC...
• Há mais de 5 anos liderando pessoas.
• Mais de 2000 horas em sala de aula.
• Mais de 100 apresentações em eventos.
• 6 a...
ngRequired
Define um determinado campo como obrigatório
1. $scope.adicionarContato = function (contato) {
2. $scope.contatos.push(angular.copy(contato));
3. delete $scope.contato...
1. $scope.contatos.push(angular.copy(contato));
2. delete $scope.contato;
3. };
4. $scope.operadoras = ["Vivo", "Oi", "Tim...
1. delete $scope.contato;
2. };
3. $scope.operadoras = ["Vivo", "Oi", "Tim"];
4. });
5. </script>
6. <style> .selecionado ...
1. };
2. $scope.operadoras = ["Vivo", "Oi", "Tim"];
3. });
4. </script>
5. <style> .selecionado {font-weight: bold; backgr...
1. $scope.operadoras = ["Vivo", "Oi", "Tim"];
2. });
3. </script>
4. <style> .selecionado {font-weight: bold; background-c...
1. });
2. </script>
3. <style> .selecionado {font-weight: bold; background-color: #FAFAD2; } </style>
4. </head>
5. <body ...
1. </script>
2. <style> .selecionado {font-weight: bold; background-color: #FAFAD2; } </style>
3. </head>
4. <body ng-cont...
1. <style> .selecionado {font-weight: bold; background-color: #FAFAD2; } </style>
2. </head>
3. <body ng-controller="lista...
1. </head>
2. <body ng-controller="listaTelefonicaCtrl">
3. <h1>{{titulo}}</h1>
4. <table ng-show="contatos.length > 0">
5...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
$valid e $invalid
Consultando a validade de um campo ou
formulário
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
ngMinlength e ngMaxlength
Define o tamanho mínimo e máximo permitido
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
$error
Consultando os erros de um campo ou formulário
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
ngPattern
Define uma RegExp para validar o campo
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
$pristine e $dirty
Verificando se um formulário ou campo já foi
utilizado alguma vez
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
1. <body ng-controller="listaTelefonicaCtrl">
2. <h1>{{titulo}}</h1>
3. <table ng-show="contatos.length > 0">
4. <tr>
5. <...
Validando Formulários com AngularJS
Validando Formulários com AngularJS
Validando Formulários com AngularJS
Validando Formulários com AngularJS
Validando Formulários com AngularJS
Validando Formulários com AngularJS
Validando Formulários com AngularJS
Validando Formulários com AngularJS
Validando Formulários com AngularJS
Validando Formulários com AngularJS
Validando Formulários com AngularJS
Validando Formulários com AngularJS
Validando Formulários com AngularJS
Validando Formulários com AngularJS
Validando Formulários com AngularJS
Validando Formulários com AngularJS
Upcoming SlideShare
Loading in …5
×

Validando Formulários com AngularJS

12,110 views

Published on

Aprenda a validar formulários com AngularJS

Published in: Technology
  • Dating for everyone is here: ♥♥♥ http://bit.ly/2u6xbL5 ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating direct: ♥♥♥ http://bit.ly/2u6xbL5 ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ★★ How Long Does She Want You to Last? ★★ A recent study proved that the average man lasts just 2-5 minutes in bed (during intercourse). The study also showed that many women need at least 7-10 minutes of intercourse to reach "The Big O" - and, worse still... 30% of women never get there during intercourse. Clearly, most men are NOT fulfilling there women's needs in bed. Now, as I've said many times - how long you can last is no guarantee of being a GREAT LOVER. But, not being able to last 20, 30 minutes or more, is definitely a sign that you're not going to "set your woman's world on fire" between the sheets. Question is: "What can you do to last longer?" Well, one of the best recommendations I can give you today is to read THIS report. In it, you'll discover a detailed guide to an Ancient Taoist Thrusting Technique that can help any man to last much longer in bed. I can vouch 100% for the technique because my husband has been using it for years :) Here's the link to the report ●●● https://tinyurl.com/rockhardxxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Não é possível baixar o ppt?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Parabéns Rodrigo Branas, estou aprendendo muito com este conteúdo.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Validando Formulários com AngularJS

  1. 1. Rodrigo Branas – @rodrigobranas - http://www.agilecode.com.br Validando Formulários com AngularJS
  2. 2. “Transformar equipes de desenvolvimento de software” http://www.agilecode.com.br
  3. 3. Rodrigo Branas rodrigo.branas@agilecode.com.br http://www.agilecode.com.br • Desenvolvendo Software na Gennera • Criando treinamentos na Agile Code • Escrevendo na Java Magazine e PacktPub • Palestrando sobre desenvolvimento de software em eventos, universidades e empresas
  4. 4. Certificações Formação Acadêmica Ciências da Computação – UFSC Gerenciamento de Projetos - FGV SCJA, SCJP, SCJD, SCWCD, SCBCD, PMP, MCP e CSM Experiência Há mais de 12 anos desenvolvendo software na plataforma Java com as empresas: EDS, HP, NET, Citibank, GM, Dígitro, Softplan, OnCast, Senai, VALE, RBS, Unimed, Globalcode, V.Office, Suntech, WPlex e Gennera.
  5. 5. • Há mais de 5 anos liderando pessoas. • Mais de 2000 horas em sala de aula. • Mais de 100 apresentações em eventos. • 6 artigos escritos para revistas. • 1 livro. • Mais de 500 profissionais treinados. • Criação de 22 palestras. • Criação de 10 treinamentos. • Criação de mais de 3.000 slides. O que realmente me motiva?
  6. 6. ngRequired Define um determinado campo como obrigatório
  7. 7. 1. $scope.adicionarContato = function (contato) { 2. $scope.contatos.push(angular.copy(contato)); 3. delete $scope.contato; 4. }; 5. $scope.operadoras = ["Vivo", "Oi", "Tim"]; 6. }); 7. </script> 8. <style> .selecionado {font-weight: bold; background-color: #FAFAD2; } </style> 9. </head> 10. <body ng-controller="listaTelefonicaCtrl"> 11. <h1>{{titulo}}</h1> 12. <table ng-show="contatos.length > 0"> 13. <tr> 14. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 15. </tr> 16. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 17. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 18. <td>{{contato.nome}}</td> 19. <td>{{contato.telefone}}<td/> 20. <td>{{contato.operadora}}</td> 21. </tr> 22. </table> 23. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 24. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 25. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 26. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 27. Adicionar 28. </button> 29. </body> 30. </html>
  8. 8. 1. $scope.contatos.push(angular.copy(contato)); 2. delete $scope.contato; 3. }; 4. $scope.operadoras = ["Vivo", "Oi", "Tim"]; 5. }); 6. </script> 7. <style> .selecionado {font-weight: bold; background-color: #FAFAD2; } </style> 8. </head> 9. <body ng-controller="listaTelefonicaCtrl"> 10. <h1>{{titulo}}</h1> 11. <table ng-show="contatos.length > 0"> 12. <tr> 13. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 14. </tr> 15. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 16. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 17. <td>{{contato.nome}}</td> 18. <td>{{contato.telefone}}<td/> 19. <td>{{contato.operadora}}</td> 20. </tr> 21. </table> 22. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 23. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 24. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 25. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 26. Adicionar 27. </button> 28. </body> 29. </html>
  9. 9. 1. delete $scope.contato; 2. }; 3. $scope.operadoras = ["Vivo", "Oi", "Tim"]; 4. }); 5. </script> 6. <style> .selecionado {font-weight: bold; background-color: #FAFAD2; } </style> 7. </head> 8. <body ng-controller="listaTelefonicaCtrl"> 9. <h1>{{titulo}}</h1> 10. <table ng-show="contatos.length > 0"> 11. <tr> 12. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 13. </tr> 14. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 15. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 16. <td>{{contato.nome}}</td> 17. <td>{{contato.telefone}}<td/> 18. <td>{{contato.operadora}}</td> 19. </tr> 20. </table> 21. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 22. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 23. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 24. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 25. Adicionar 26. </button> 27. </body> 28. </html>
  10. 10. 1. }; 2. $scope.operadoras = ["Vivo", "Oi", "Tim"]; 3. }); 4. </script> 5. <style> .selecionado {font-weight: bold; background-color: #FAFAD2; } </style> 6. </head> 7. <body ng-controller="listaTelefonicaCtrl"> 8. <h1>{{titulo}}</h1> 9. <table ng-show="contatos.length > 0"> 10. <tr> 11. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 12. </tr> 13. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 14. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 15. <td>{{contato.nome}}</td> 16. <td>{{contato.telefone}}<td/> 17. <td>{{contato.operadora}}</td> 18. </tr> 19. </table> 20. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 21. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 22. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 23. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 24. Adicionar 25. </button> 26. </body> 27. </html>
  11. 11. 1. $scope.operadoras = ["Vivo", "Oi", "Tim"]; 2. }); 3. </script> 4. <style> .selecionado {font-weight: bold; background-color: #FAFAD2; } </style> 5. </head> 6. <body ng-controller="listaTelefonicaCtrl"> 7. <h1>{{titulo}}</h1> 8. <table ng-show="contatos.length > 0"> 9. <tr> 10. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 11. </tr> 12. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 13. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 14. <td>{{contato.nome}}</td> 15. <td>{{contato.telefone}}<td/> 16. <td>{{contato.operadora}}</td> 17. </tr> 18. </table> 19. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 20. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 21. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 22. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 23. Adicionar 24. </button> 25. </body> 26. </html>
  12. 12. 1. }); 2. </script> 3. <style> .selecionado {font-weight: bold; background-color: #FAFAD2; } </style> 4. </head> 5. <body ng-controller="listaTelefonicaCtrl"> 6. <h1>{{titulo}}</h1> 7. <table ng-show="contatos.length > 0"> 8. <tr> 9. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 10. </tr> 11. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 12. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 13. <td>{{contato.nome}}</td> 14. <td>{{contato.telefone}}<td/> 15. <td>{{contato.operadora}}</td> 16. </tr> 17. </table> 18. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 19. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 20. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 21. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 22. Adicionar 23. </button> 24. </body> 25. </html>
  13. 13. 1. </script> 2. <style> .selecionado {font-weight: bold; background-color: #FAFAD2; } </style> 3. </head> 4. <body ng-controller="listaTelefonicaCtrl"> 5. <h1>{{titulo}}</h1> 6. <table ng-show="contatos.length > 0"> 7. <tr> 8. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 9. </tr> 10. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 11. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 12. <td>{{contato.nome}}</td> 13. <td>{{contato.telefone}}<td/> 14. <td>{{contato.operadora}}</td> 15. </tr> 16. </table> 17. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 18. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 19. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 20. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 21. Adicionar 22. </button> 23. </body> 24. </html>
  14. 14. 1. <style> .selecionado {font-weight: bold; background-color: #FAFAD2; } </style> 2. </head> 3. <body ng-controller="listaTelefonicaCtrl"> 4. <h1>{{titulo}}</h1> 5. <table ng-show="contatos.length > 0"> 6. <tr> 7. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 8. </tr> 9. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 10. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 11. <td>{{contato.nome}}</td> 12. <td>{{contato.telefone}}<td/> 13. <td>{{contato.operadora}}</td> 14. </tr> 15. </table> 16. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 17. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 18. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 19. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 20. Adicionar 21. </button> 22. </body> 23. </html>
  15. 15. 1. </head> 2. <body ng-controller="listaTelefonicaCtrl"> 3. <h1>{{titulo}}</h1> 4. <table ng-show="contatos.length > 0"> 5. <tr> 6. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 7. </tr> 8. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 9. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 10. <td>{{contato.nome}}</td> 11. <td>{{contato.telefone}}<td/> 12. <td>{{contato.operadora}}</td> 13. </tr> 14. </table> 15. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 19. Adicionar 20. </button> 21. </body> 22. </html>
  16. 16. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <input type="text" ng-model="contato.nome" placeholder="Nome"/> 15. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 16. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 17. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 18. Adicionar 19. </button> 20. </body> 21. </html>
  17. 17. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <input type="text" ng-model="contato.nome" placeholder="Nome" ng-required="true"/> 15. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 16. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 17. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 18. Adicionar 19. </button> 20. </body> 21. </html>
  18. 18. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <input type="text" ng-model="contato.nome" placeholder="Nome" ng-required="true"/> 15. <input type="text" ng-model="contato.telefone" placeholder="Telefone"/> 16. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 17. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 18. Adicionar 19. </button> 20. </body> 21. </html>
  19. 19. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <input type="text" ng-model="contato.nome" placeholder="Nome" ng-required="true"/> 15. <input type="text" ng-model="contato.telefone" placeholder="Telefone" ng-required="true"/> 16. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 17. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 18. Adicionar 19. </button> 20. </body> 21. </html>
  20. 20. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <input type="text" ng-model="contato.nome" placeholder="Nome" ng-required="true"/> 15. <input type="text" ng-model="contato.telefone" placeholder="Telefone" ng-required="true"/> 16. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 17. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 18. Adicionar 19. </button> 20. </body> 21. </html>
  21. 21. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" ng-required="true"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" ng-required="true"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 20. Adicionar 21. </button> 22. </body> 23. </html>
  22. 22. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" ng-required="true"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" ng-required="true"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 20. Adicionar 21. </button> 22. </body> 23. </html>
  23. 23. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" ng-required="true"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" ng-required="true"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 20. Adicionar 21. </button> 22. </body> 23. </html>
  24. 24. $valid e $invalid Consultando a validade de um campo ou formulário
  25. 25. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" ng-required="true"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" ng-required="true"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 20. Adicionar 21. </button> 22. </body> 23. </html>
  26. 26. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" ng-required="true"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" ng-required="true"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <button ng-click="adicionarContato(contato)" ng-disabled="!(contato.nome && contato.telefone)"> 20. Adicionar 21. </button> 22. </body> 23. </html>
  27. 27. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" ng-required="true"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" ng-required="true"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <button ng-click="adicionarContato(contato)" ng-disabled=""> 20. Adicionar 21. </button> 22. </body> 23. </html>
  28. 28. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" ng-required="true"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" ng-required="true"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 20. Adicionar 21. </button> 22. </body> 23. </html>
  29. 29. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" ng-required="true"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" ng-required="true"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 20. Adicionar 21. </button> 22. </body> 23. </html>
  30. 30. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" ng-required="true"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" ng-required="true"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <span ng-hide="contatoForm.$valid">Por favor, preencha o nome e telefone!</span> 20. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 21. Adicionar 22. </button> 23. </body> 24. </html>
  31. 31. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" ng-required="true"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" ng-required="true"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <span ng-hide="contatoForm.$valid">Por favor, preencha o nome e telefone!</span> 20. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 21. Adicionar 22. </button> 23. </body> 24. </html>
  32. 32. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" ng-required="true"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" ng-required="true"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <span ng-hide="contatoForm.$valid">Por favor, preencha o nome e telefone!</span> 20. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 21. Adicionar 22. </button> 23. </body> 24. </html>
  33. 33. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" ng-required="true"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <span ng-hide="contatoForm.$valid">Por favor, preencha o nome e telefone!</span> 20. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 21. Adicionar 22. </button> 23. </body> 24. </html>
  34. 34. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <span ng-hide="contatoForm.$valid">Por favor, preencha o nome e telefone!</span> 20. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 21. Adicionar 22. </button> 23. </body> 24. </html>
  35. 35. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <span ng-hide="contatoForm.$valid">Por favor, preencha o nome e telefone!</span> 20. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 21. Adicionar 22. </button> 23. </body> 24. </html>
  36. 36. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <span ng-hide="contatoForm.$valid">Por favor, preencha o nome e telefone!</span> 20. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 21. Adicionar 22. </button> 23. </body> 24. </html>
  37. 37. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. 20. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 21. Adicionar 22. </button> 23. </body> 24. </html>
  38. 38. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <span ng-hide="contatoForm.nome.$valid">Por favor, preencha o nome!</span> 20. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 21. Adicionar 22. </button> 23. </body> 24. </html>
  39. 39. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <span ng-hide="contatoForm.nome.$valid">Por favor, preencha o nome!</span> 20. <span ng-hide="contatoForm.telefone.$valid">Por favor, preencha o telefone!</span> 21. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 22. Adicionar 23. </button> 24. </body> 25. </html>
  40. 40. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <span ng-hide="contatoForm.nome.$valid">Por favor, preencha o nome!</span> 20. <span ng-hide="contatoForm.telefone.$valid">Por favor, preencha o telefone!</span> 21. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 22. Adicionar 23. </button> 24. </body> 25. </html>
  41. 41. ngMinlength e ngMaxlength Define o tamanho mínimo e máximo permitido
  42. 42. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <span ng-hide="contatoForm.nome.$valid">Por favor, preencha o nome!</span> 20. <span ng-hide="contatoForm.telefone.$valid">Por favor, preencha o telefone!</span> 21. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 22. Adicionar 23. </button> 24. </body> 25. </html>
  43. 43. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <span ng-hide="contatoForm.nome.$valid">Por favor, preencha o nome!</span> 20. <span ng-hide="contatoForm.telefone.$valid">Por favor, preencha o telefone!</span> 21. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 22. Adicionar 23. </button> 24. </body> 25. </html>
  44. 44. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <span ng-hide="contatoForm.nome.$valid">Por favor, preencha o nome!</span> 20. <span ng-hide="contatoForm.telefone.$valid">Por favor, preencha o telefone!</span> 21. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 22. Adicionar 23. </button> 24. </body> 25. </html>
  45. 45. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <span ng-hide="contatoForm.nome.$valid">Por favor, preencha o nome!</span> 20. <span ng-hide="contatoForm.telefone.$valid">Por favor, preencha o telefone!</span> 21. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 22. Adicionar 23. </button> 24. </body> 25. </html>
  46. 46. $error Consultando os erros de um campo ou formulário
  47. 47. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <span ng-hide="contatoForm.nome.$valid">Por favor, preencha o nome!</span> 20. <span ng-hide="contatoForm.telefone.$valid">Por favor, preencha o telefone!</span> 21. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 22. Adicionar 23. </button> 24. </body> 25. </html>
  48. 48. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <span ng-hide="contatoForm.nome.$valid">Por favor, preencha o nome!</span> 20. <span ng-hide="contatoForm.telefone.$valid">Por favor, preencha o telefone!</span> 21. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 22. Adicionar 23. </button> 24. </body> 25. </html>
  49. 49. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <span >Por favor, preencha o nome!</span> 20. <span ng-hide="contatoForm.telefone.$valid">Por favor, preencha o telefone!</span> 21. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 22. Adicionar 23. </button> 24. </body> 25. </html>
  50. 50. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <span ng-show="contatoForm.nome.$error.required">Por favor, preencha o nome!</span> 20. <span ng-hide="contatoForm.telefone.$valid">Por favor, preencha o telefone!</span> 21. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 22. Adicionar 23. </button> 24. </body> 25. </html>
  51. 51. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <span ng-show="contatoForm.nome.$error.required">Por favor, preencha o nome!</span> 20. <span ng-hide="contatoForm.telefone.$valid">Por favor, preencha o telefone!</span> 21. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 22. Adicionar 23. </button> 24. </body> 25. </html>
  52. 52. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <span ng-show="contatoForm.nome.$error.required">Por favor, preencha o nome!</span> 20. <span ng-hide="contatoForm.telefone.$valid">Por favor, preencha o telefone!</span> 21. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 22. Adicionar 23. </button> 24. </body> 25. </html>
  53. 53. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <span ng-show="contatoForm.nome.$error.required">Por favor, preencha o nome!</span> 20. <span >Por favor, preencha o telefone!</span> 21. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 22. Adicionar 23. </button> 24. </body> 25. </html>
  54. 54. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <span ng-show="contatoForm.nome.$error.required">Por favor, preencha o nome!</span> 20. <span ng-show="contatoForm.telefone.$error.required">Por favor, preencha o telefone!</span> 21. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 22. Adicionar 23. </button> 24. </body> 25. </html>
  55. 55. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <span ng-show="contatoForm.nome.$error.required">Por favor, preencha o nome!</span> 20. <span ng-show="contatoForm.telefone.$error.required">Por favor, preencha o telefone!</span> 21. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 22. Adicionar 23. </button> 24. </body> 25. </html>
  56. 56. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <span ng-show="contatoForm.nome.$error.required">Por favor, preencha o nome!</span> 20. 21. <span ng-show="contatoForm.telefone.$error.required">Por favor, preencha o telefone!</span> 22. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 23. Adicionar 24. </button> 25. </body> 26. </html>
  57. 57. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <span ng-show="contatoForm.nome.$error.required">Por favor, preencha o nome!</span> 20. <span ng-show="contatoForm.nome.$error.minlength">O nome deve ter no mínimo 10 letras!</span> 21. <span ng-show="contatoForm.telefone.$error.required">Por favor, preencha o telefone!</span> 22. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 23. Adicionar 24. </button> 25. </body> 26. </html>
  58. 58. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <span ng-show="contatoForm.nome.$error.required">Por favor, preencha o nome!</span> 20. <span ng-show="contatoForm.nome.$error.minlength">O nome deve ter no mínimo 10 letras!</span> 21. <span ng-show="contatoForm.telefone.$error.required">Por favor, preencha o telefone!</span> 22. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 23. Adicionar 24. </button> 25. </body> 26. </html>
  59. 59. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <span ng-show="contatoForm.nome.$error.required">Por favor, preencha o nome!</span> 20. <span ng-show="contatoForm.nome.$error.minlength">O nome deve ter no mínimo 10 letras!</span> 21. 22. <span ng-show="contatoForm.telefone.$error.required">Por favor, preencha o telefone!</span> 23. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 24. Adicionar 25. </button> 26. </body> 27. </html>
  60. 60. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <span ng-show="contatoForm.nome.$error.required">Por favor, preencha o nome!</span> 20. <span ng-show="contatoForm.nome.$error.minlength">O nome deve ter no mínimo 10 letras!</span> 21. <span ng-show="contatoForm.nome.$error.maxlength">O nome deve ter no máximo 12 letras!</span> 22. <span ng-show="contatoForm.telefone.$error.required">Por favor, preencha o telefone!</span> 23. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 24. Adicionar 25. </button> 26. </body> 27. </html>
  61. 61. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <span ng-show="contatoForm.nome.$error.required">Por favor, preencha o nome!</span> 20. <span ng-show="contatoForm.nome.$error.minlength">O nome deve ter no mínimo 10 letras!</span> 21. <span ng-show="contatoForm.nome.$error.maxlength">O nome deve ter no máximo 12 letras!</span> 22. <span ng-show="contatoForm.telefone.$error.required">Por favor, preencha o telefone!</span> 23. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 24. Adicionar 25. </button> 26. </body> 27. </html>
  62. 62. ngPattern Define uma RegExp para validar o campo
  63. 63. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <span ng-show="contatoForm.nome.$error.required">Por favor, preencha o nome!</span> 20. <span ng-show="contatoForm.nome.$error.minlength">O nome deve ter no mínimo 10 letras!</span> 21. <span ng-show="contatoForm.nome.$error.maxlength">O nome deve ter no máximo 12 letras!</span> 22. <span ng-show="contatoForm.telefone.$error.required">Por favor, preencha o telefone!</span> 23. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 24. Adicionar 25. </button> 26. </body> 27. </html>
  64. 64. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true" ng-pattern=""/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <span ng-show="contatoForm.nome.$error.required">Por favor, preencha o nome!</span> 20. <span ng-show="contatoForm.nome.$error.minlength">O nome deve ter no mínimo 10 letras!</span> 21. <span ng-show="contatoForm.nome.$error.maxlength">O nome deve ter no máximo 12 letras!</span> 22. <span ng-show="contatoForm.telefone.$error.required">Por favor, preencha o telefone!</span> 23. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 24. Adicionar 25. </button> 26. </body> 27. </html>
  65. 65. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true" ng-pattern="/d{4}-d{4}/"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <span ng-show="contatoForm.nome.$error.required">Por favor, preencha o nome!</span> 20. <span ng-show="contatoForm.nome.$error.minlength">O nome deve ter no mínimo 10 letras!</span> 21. <span ng-show="contatoForm.nome.$error.maxlength">O nome deve ter no máximo 12 letras!</span> 22. <span ng-show="contatoForm.telefone.$error.required">Por favor, preencha o telefone!</span> 23. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 24. Adicionar 25. </button> 26. </body> 27. </html>
  66. 66. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true" ng-pattern="/d{4}-d{4}/"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <span ng-show="contatoForm.nome.$error.required">Por favor, preencha o nome!</span> 20. <span ng-show="contatoForm.nome.$error.minlength">O nome deve ter no mínimo 10 letras!</span> 21. <span ng-show="contatoForm.nome.$error.maxlength">O nome deve ter no máximo 12 letras!</span> 22. <span ng-show="contatoForm.telefone.$error.required">Por favor, preencha o telefone!</span> 23. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 24. Adicionar 25. </button> 26. </body> 27. </html>
  67. 67. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true" ng-pattern="/d{4}-d{4}/"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <span ng-show="contatoForm.nome.$error.required">Por favor, preencha o nome!</span> 20. <span ng-show="contatoForm.nome.$error.minlength">O nome deve ter no mínimo 10 letras!</span> 21. <span ng-show="contatoForm.nome.$error.maxlength">O nome deve ter no máximo 12 letras!</span> 22. <span ng-show="contatoForm.telefone.$error.required">Por favor, preencha o telefone!</span> 23. 24. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 25. Adicionar 26. </button> 27. </body> 28. </html>
  68. 68. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true" ng-pattern="/d{4}-d{4}/"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <span ng-show="contatoForm.nome.$error.required">Por favor, preencha o nome!</span> 20. <span ng-show="contatoForm.nome.$error.minlength">O nome deve ter no mínimo 10 letras!</span> 21. <span ng-show="contatoForm.nome.$error.maxlength">O nome deve ter no máximo 12 letras!</span> 22. <span ng-show="contatoForm.telefone.$error.required">Por favor, preencha o telefone!</span> 23. <span ng-show="contatoForm.telefone.$error.pattern">O telefone tem o formato 9999-9999</span> 24. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 25. Adicionar 26. </button> 27. </body> 28. </html>
  69. 69. $pristine e $dirty Verificando se um formulário ou campo já foi utilizado alguma vez
  70. 70. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true" ng-pattern="/d{4}-d{4}/"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <span ng-show="contatoForm.nome.$error.required">Por favor, preencha o nome!</span> 20. <span ng-show="contatoForm.nome.$error.minlength">O nome deve ter no mínimo 10 letras!</span> 21. <span ng-show="contatoForm.nome.$error.maxlength">O nome deve ter no máximo 12 letras!</span> 22. <span ng-show="contatoForm.telefone.$error.required">Por favor, preencha o telefone!</span> 23. <span ng-show="contatoForm.telefone.$error.pattern">O telefone tem o formato 9999-9999</span> 24. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 25. Adicionar 26. </button> 27. </body> 28. </html>
  71. 71. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true" ng-pattern="/d{4}-d{4}/"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <div ng-hide="contatoForm.$pristine"> 20. <span ng-show="contatoForm.nome.$error.required">Por favor, preencha o nome!</span> 21. <span ng-show="contatoForm.nome.$error.minlength">O nome deve ter no mínimo 10 letras!</span> 22. <span ng-show="contatoForm.nome.$error.maxlength">O nome deve ter no máximo 12 letras!</span> 23. <span ng-show="contatoForm.telefone.$error.required">Por favor, preencha o telefone!</span> 24. <span ng-show="contatoForm.telefone.$error.pattern">O telefone tem o formato 9999-9999</span> 25. </div> 26. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 27. Adicionar 28. </button>
  72. 72. 1. <body ng-controller="listaTelefonicaCtrl"> 2. <h1>{{titulo}}</h1> 3. <table ng-show="contatos.length > 0"> 4. <tr> 5. <th></th><th>Nome</th><th>Telefone</th><th>Operadora</th> 6. </tr> 7. <tr ng-class="{selecionado: contato.selecionado}" ng-repeat="contato in contatos"> 8. <td><input type="checkbox" ng-model="contato.selecionado"/></td> 9. <td>{{contato.nome}}</td> 10. <td>{{contato.telefone}}<td/> 11. <td>{{contato.operadora}}</td> 12. </tr> 13. </table> 14. <form name="contatoForm"> 15. <input type="text" ng-model="contato.nome" placeholder="Nome" name="nome" ng-required="true" ng-minlength="10" ng-maxlength="12"/> 16. <input type="text" ng-model="contato.telefone" placeholder="Telefone" name="telefone" ng- required="true" ng-pattern="/d{4}-d{4}/"/> 17. <select ng-model="contato.operadora" ng-options="operadora for operadora in operadoras"></select> 18. </form> 19. <div ng-hide="contatoForm.$pristine"> 20. <span ng-show="contatoForm.nome.$error.required">Por favor, preencha o nome!</span> 21. <span ng-show="contatoForm.nome.$error.minlength">O nome deve ter no mínimo 10 letras!</span> 22. <span ng-show="contatoForm.nome.$error.maxlength">O nome deve ter no máximo 12 letras!</span> 23. <span ng-show="contatoForm.telefone.$error.required">Por favor, preencha o telefone!</span> 24. <span ng-show="contatoForm.telefone.$error.pattern">O telefone tem o formato 9999-9999</span> 25. </div> 26. <button ng-click="adicionarContato(contato)" ng-disabled="contatoForm.$invalid"> 27. Adicionar 28. </button>

×