Validando Formulários com AngularJS

10,850 views

Published on

Aprenda a validar formulários com AngularJS

Published in: Technology
2 Comments
22 Likes
Statistics
Notes
No Downloads
Views
Total views
10,850
On SlideShare
0
From Embeds
0
Number of Embeds
4,321
Actions
Shares
0
Downloads
0
Comments
2
Likes
22
Embeds 0
No embeds

No notes for slide

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>

×