Série AngularJS: Validando formulário

Olá, pessoal!

Hoje vamos ver como customizar mensagens de validação em um formulário com AngularJS. Será uma simples validação. Para algo mais específico, precisamos criar diretivas. Por exemplo, para validar se o username é unico, temos que criar uma diretiva que faça essa validação para poder exibir uma mensagem no formulário. Não vamos entrar nesse cenário aqui, pois já seria um novo artigo.

O exemplo vai estar no projeto receipeangularexample no meu Github.

Vou assumir que você já tem a configuração básica do AngularJS. Para o exemplo usarei rotas/deep linking para acessar o conteúdo.

Passo 01 – Configurando a rota

 class="brush: javascript; gutter: true">when("/validationform", {
		templateUrl : "formvalidation.html",
		controller : recipeController}).

//restante do code omitido

Passo 02 – Criando uma função no Controller

Vamos criar uma função bem simples no controller:

recipeController = function($scope, UserService) {
	//codo omitted

	$scope.send = function($scope){
		alert("send");

	}

};

Passo 03 – Criando o formulário

Agora vem o nosso formulário. Veja:

<form name="mainForm" ng-submit="send()">
	
<div>
	<label>Nome</label>
	<input type="text" ng-model="user.name" name="username" required/>
	<span ng-class="error" ng-show="mainForm.username.$error.required">Nome é obrigatório</span>
	
</div>
<div>
	<label>email</label>
	<input type="email" ng-model="user.email" name="useremail" required/>
	<span ng-class="error" ng-show="mainForm.useremail.$error.required">Email é obrigatório</span>
	<span ng-class="error" ng-show="mainForm.useremail.$error.email"> Formato do e-mail é inválido</span>
</div>
<div>
	<label>Idade</label>
	<input type="number" ng-model="user.age" name="userage" required ng-maxlength=2 ng-minlength=1>
	<span ng-class="error" ng-show="mainForm.userage.$error.maxlength">Não é permitido mais que 2 digitos</span>
</div>
<div>
<label>Blog/Site</label>
<input type="url" ng-model="user.site" name="usersite" ng-maxlength=30>
<!-- the message only show when the form is validated-->
<div ng-show="mainForm.usersite.$dirty && mainForm.usersite.$invalid">
	<span ng-class="error" ng-show="mainForm.usersite.$error.url">Url inválida</span>
</div>
</div>
<div>
<input type="submit" ng-disabled="mainForm.$invalid">
</div>
</form>

O resultado pode ser visto neste link.

Entendendo o código

Claro que precisamos entender o que o código faz. Focarei apenas no que é importante, ou seja, não preciso explicar o que um atributo required no campo input faz.

Primeiro ponto

Ter um nome para o formulário. Afinal, sem um nome nada adianta entender o restante do código. É através dele que vamos acessar os campos.

 class="brush: javascript; gutter: true"><form name="mainForm" ng-submit="send()">

Bloco nome

<div>
	<label>Nome</label>
	<input type="text" ng-model="user.name" name="username" required/>
	<span ng-class="error" ng-show="mainForm.username.$error.required">Nome é obrigatório</span>

</div>

No campo input temos que dar um name para o nosso campo e estamos dizendo que ele é required e qual mensagem deve ser exibida. Se não fizermos isso, será a mensagem default HTML↳HTML45 conteúdosA importância do HTML e CSS para quem trabalha com UI Design e Design SystemProduto & UX · dez 2024Como hostear seu site HTML gratuitamente com GitHub PagesDev (Back & Front) · jun 2025SQL Server – Como criar um versionamento de código das suas Stored Procedures em HTML e com comentários da alteraçãoData · nov 2020Ver tudo em Dev (Back & Front) → 5. Na linha span estamos dizendo: “exiba esta mensagem se o campo username for inválido”, ou seja, se não tiver nada digitado, vai exibir essa mensagem por padrão, como vimos na imagem anterior.

Bloco e-mail

<div>
	<label>email</label>
	<input type="email" ng-model="user.email" name="useremail" required/>
	<span ng-class="error" ng-show="mainForm.useremail.$error.required">Email é obrigatório</span>
	<span ng-class="error" ng-show="mainForm.useremail.$error.email"> Formato do e-mail é inválido</span>
</div>

Fizemos a mesma coisa do campo nome, a diferença é que aqui temos um campo do tipo e-mail que valida o formato do e-mail e se este for inválido, exibe a mensagem que colocamos na validação.

<span ng-class="error" ng-show="mainForm.useremail.$error.email"> Formato do e-mail é inválido</span>

O objeto $error que estamos usando contém todas as validações para um formulário específico, que no nosso caso se chama mainForm.

Lembrando que a estrutura é nomeDoForm.nomePropriedade.$error.attributo ou nomeDoForm.expression.

Para o bloco idade, nada de diferente; então nem preciso explicar.

Bloco site

Aqui estamos validando a URL e para isso temos o type URL já no HTML 5. Mas observe a diferença: mensagem somente é exiba quando o campo é modificado. Ela não aparece quando a página é carregada, como fizemos nos outros campos – isso ocorre devido a essa linha:

<div ng-show="mainForm.usersite.$dirty && mainForm.usersite.$invalid">

Ela está dizendo: “se o campo usersite for modificado e inválido, exiba o conteudo desse bloco” que no nosso caso temos a mensagem “Url inválida”. $dirty retorna true se o campo foi modificado.

Bloco botão submit

<div>
<input type="submit" ng-disabled="mainForm.$invalid">
</div>

E para garantir que o usuário nao vai submeter o form, vamos desabilitar o botão submit se o formulário é invalido, ou seja, se todos os requisitos não são atendidos, esse botão fica disabled.

Testando

Por hoje é isso! Vou ficando por aqui e espero que tenham gostado do artigo.

Abraços!