Valide a entrada de dados com AngularJS

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:

Vemos que como não há dados, o botão enviar está desabilitado, isso vai mudar quando preenchermos os dados apropriados, como vemos na imagem a seguir:

Se tivéssemos colocado um e-mail com formato incorreto, o botão não teria sido ativado, então vemos como AngularJS Facilitou-nos o desenvolvimento de algo tão simples como um formulário e com isso terminamos este tutorial, pudemos validar um formulário de forma completa, usando apenas propriedades de HTML5 E um pouco AngularJS.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo