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