Validando Formulários com AngularJS

1. Rodrigo Branas – @rodrigobranas - http://www.agilecode.com.br Validando Formulários com AngularJS

2. “Transformar equipes de desenvolvimento de software” http://www.agilecode.com.br

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. 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. • 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. ngRequired Define um determinado campo como obrigatório

12. 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>

13. 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>

14. 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>

15. 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>

16. 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>

17. 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>

18. 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>

19. 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>

20. 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>

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

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

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

24. 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>

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

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>

29. $valid e $invalid Consultando a validade de um campo ou formulário

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. <button ng-click="adicionarContato(contato)" ng-disabled=""> 20. Adicionar 21. </button> 22. </body> 23. </html>

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

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

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

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"/> 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>

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"/> 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>

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"/> 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>

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"/> 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>

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"/> 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>

51. ngMinlength e ngMaxlength Define o tamanho mínimo e máximo permitido

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"/> 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>

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

59. $error Consultando os erros de um campo ou formulário

62. 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>

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

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"/> 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>

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"/> 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>

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"/> 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>

69. 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>

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"/> 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>

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"/> 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>

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"/> 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>

73. 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>

75. ngPattern Define uma RegExp para validar o campo

79. 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>

80. 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>

81. 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>

82. 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>

83. 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>

84. $pristine e $dirty Verificando se um formulário ou campo já foi utilizado alguma vez

85. 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>

86. 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>

87. 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>

Validando Formulários com AngularJS

Recommended

Recommended

More Related Content

More from Rodrigo Branas

More from Rodrigo Branas (20)

Validando Formulários com AngularJS