Validando Formulários com AngularJS

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

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

3.
Rodrigo Branas rodrigo.branas@agilecode.com.br http://www.agilecode.com.br • DesenvolvendoSoftware 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 daComputaçã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á maisde 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 determinadocampo 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. <bodyng-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>

27.

28.

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

30.

31.

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>

36.

42.

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>

45.

46.

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>

50.

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

55.

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>

58.

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

60.

61.

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>

64.

65.

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>

74.

75.
ngPattern Define uma RegExppara validar o campo

78.

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

88.

Validando Formulários com AngularJS

More Related Content

More from Rodrigo Branas

Validando Formulários com AngularJS