Índice
Quando trabalhamos na construção de aplicativos de página única, um dos pontos que podemos destacar é a entrada de dados, este tipo de funcionalidade geralmente é feito com o uso de um FormatoObviamente, se vamos solicitar dados de um usuário, devemos validar que eles não vêm com erros.Felizmente AngularJS Possui alguns mecanismos internos que nos permitem fazer validações de forma simples, permitindo assim que o formulário só seja enviado quando estiverem reunidas as condições de formato dos dados.
A primeira coisa que vamos precisar é um Formato, vamos colocar alguns campos, por exemplo nome, apelido e um campo de email, geralmente, estes são os tipos de campos mais utilizados e que nos darão a oportunidade de gerar validações. Vamos ver o código inicial que temos:
Nome:Sobrenome:E-mail:Idade:Mandar
Se olharmos, usamos características de HTML para validar os campos, por exemplo, colocando a propriedade requeridos para os campos obrigatórios, eles pensarão que isso só funcionará em navegadores mais novos ou compatíveis HTML5 apenas, mas quando usamos AngularJS, isso preencherá validações alternativas se abrirmos o aplicativo em um navegador que não é compatível com HTML5.
Vemos que o campo idade tem, além da validação de tipo, duas propriedades de AngularJS que são para o comprimento do campo, isso significa que só podemos colocar números entre 1 e 3 dígitos no total.
Até o momento estamos indo bem com nosso exercício, porém ainda devemos validar que para enviar os dados tudo deve ser validado, para isso devemos gerar um controlador que nos permita fazer isso, para isso vamos indicar no formulário qual controlador vai usar, vamos mudar a linha:
Pelo seguinte:
Dentro do controlador, podemos acessar uma propriedade chamada $ válido, que é o que indicará se nosso formulário é válido para poder enviar os dados, para isso devemos modificar a linha do botão de envio de dados com o seguinte:
Mandar
Fazer a modificação deve ser o seguinte:
Mandar
Finalmente, podemos criar nosso controlador em AngularJS, com o qual iremos processar nossos dados:
function AddControllerUser ($ scope) {$ scope.message = ''; $ scope.addUser = function () {$ scope.message = 'Obrigado,' + $ scope.user.name + ', foi adicionado!'; }; } Isso deve nos dar um resultado como o seguinte em nosso navegador:
