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, validar se o username é unico. Tem 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 post.
Lets go…
Github
O exemplo vai estar no projeto receipeangularexample no meu github
https://github.com/camilolopes/workspaceAngularJs
Development
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.
Step 1 – Configurando a rota
when("/validationform", {
templateUrl : "formvalidation.html",
controller : recipeController}).
//restante do code omitido
Step 2 – Criando uma função no Controller
Vamos criar uma função bem simples no controller
var recipeController = function($scope, UserService) {
//codo omitted
$scope.send = function($scope){
alert("send");
}
};
Step 3 – 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>
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, sem um nome nada adianta entender o restante do código. É através dele que vamos acessar os campos.
<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 exiba. 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 email
<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 email que valida o formato do e-mail, 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 específico formulário, que no nosso caso chama-se 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 ja no HTML 5.Mas, observe a diferença que a mensagem somente é exiba quando o campo é modificado, ela não aparece quando a página é carregada, como fizemos nos outros campos, isso devido a essa linha aqui:
<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 usuario 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 post.
abracos, see ya!!
