Como aplicar validação em formulários reativos no Angular?

Já os formulários data driven (orientados a dados) são criados e configurados no component.ts e a maior parte do código fica nesse arquivo e não no html. Dessa forma, temos um template mais limpo, apenas com a estrutura básica do formulário, já que todas as validações são feitas no componente. No html é feita a associação do template ao componente e não precisamos obrigatoriamente do ngSubmit.

Fáceis de criar e de dar manutenção, os formulários reativos, como também são conhecidos, são bastante utilizados devido ao seu poder e capacidade de conseguir reagir a mudanças que acontecem no formulário, utilizando observables.

Agora nós vamos entender como podemos criar um formulário reativo e aplicar validações nele.

O que precisamos configurar?

Com a aplicação criada, precisamos importar o reactiveformsModule no arquivo app.module.ts e colocar no array de imports do ngModule, assim:

Se você tem dúvidas nesse passo, veja aqui como começar com o Angular e como criar sua primeira aplicação.

Agora, vamos criar no “app.component.ts” uma variável chamada formulario do tipo FormGroup (deve ser importado também), que é uma classe do Angular que vai nos ajudar na implementação e validação dos forms. Outra classe importante que veremos mais à frente é o FormControl.

A abordagem que vamos utilizar para criar nosso formulário é através da injeção de dependência do service FormBuilder. Esse serviço fornece métodos para gerar controles de formulários e evita a criação manual de instâncias de controle. Para isso vamos ter que:

• Importar a classe FormBuilder;
• Injetar o service FormBuilder;
• Gerar o conteúdo do formulário.

Vamos criar um formulário com 4 campos:

• nome
• username
• email
• senha

Nosso app.component.ts ficará assim:

Também precisamos criar a estrutura do formulário no template com os quatro campos. Agora, antes de implementar as validações, vamos fazer a sincronização do formulário criado no componente com o template para vermos se está tudo certo.

Para isso podemos usar uma diretiva do ReactiveFormsModule chamada formGroup. E na tag form do html vamos atribuir a diretiva à nossa variável formulario e fazer um property binding, porque sempre que o campo for modificado, queremos atualizar e atribuir o valor ao formulário.

Para associar cada input utilizamos outra diretiva chamada formControlName, fazendo um link entre o campo no html e o componente e passando exatamente o nome das variáveis que criamos através do FormBuilder.

Nosso formulário está assim (estilizado com o Angular Material).

Aplicando as validações

Agora, vamos incluir as seguintes validações na aplicação:

• Todos os campos serão de preenchimento obrigatório;
• O campo username aceitará apenas letras minúsculas;
• Verificação do preenchimento correto do formato de e-mail;
• Quantidade mínima de caracteres para a senha será 6.

Para começar, vamos importar a classe Validators:

Essa classe já traz vários métodos de validação prontos e fáceis de usar como por exemplo:

• required() - campo de preenchimento obrigatório;
• maxLength() - quantidade máxima de caracteres permitido;
• minLength() - quantidade mínima de caracteres permitido;
• email() - valida o formato de e-mail;

Veja aqui a lista completa de métodos da classe Validators.

Agora vamos implementar as validações no formulário, passando os métodos de validação como segundo parâmetro do array criado no component.ts.

Exibindo mensagens de erro

Para exibir mensagens referentes às validações, vamos incluir no html, abaixo do input, uma div com a diretiva *ngIf, passando o formulário e pegando os erros do campo passado como parâmetro, e incluindo a mensagem que queremos apresentar:

Vamos replicar isso em cada campo e ver o resultado:

Ok, agora as mensagens estão aparecendo, mas já no carregamento inicial da aplicação. Será que existe uma forma mais amigável de apresentá-las? Apenas quando o campo for acessado? Sim!! Podemos fazer isso através de uma propriedade do FormControl chamada touched. Seu valor inicial é false e sempre que o input dispara o evento onBlur, ou seja, quando o campo é acessado e perde o foco, a propriedade recebe o valor true.

No exemplo do campo nome ficará assim:

Replicando para os outros campos, agora as mensagens de erro aparecem apenas quando necessário.

Criando validações customizadas

A validação que queremos incluir para que o campo username receba apenas letras minúsculas não está presente na classe Validators. Mas não tem problema, pois é possível criar inúmeras validações customizadas que atendam às suas necessidades. No nosso exemplo, criamos um arquivo chamado minusculoValidator.ts, importamos a classe Abstract Control e criamos a lógica da validação.

minusculoValidator.ts:

Depois disso, importamos a validação no componente e incluímos no array junto com as outras validações.

app.component.ts:

app.component.html:

Assim, através da propriedade errors, podemos criar mensagens customizadas dependendo do erro que seja disparado.

Desabilitar/Habilitar o botão

Outro ponto importante é que o botão para envio dos dados está habilitado desde o início, mesmo que os campos não tenham sido preenchidos. Vamos resolver isso?

O formulário possui a propriedade valid e podemos fazer um property binding atribuindo-a à propriedade disabled do botão e assim criar uma lógica para que o botão fique habilitado apenas quando o formulário estiver válido, ou seja, quando todos os campos forem preenchidos corretamente.

app.component.html:

Aqui temos o resultado final:

Conclusão

Neste artigo, nós aprendemos como criar um formulário reativo utilizando o serviço FormBuilder, como aplicar validações através da classe Validators e criar validações customizadas. Além disso, vimos como mostrar mensagens de erro personalizadas e habilitar/desabilitar o botão de envio de dados de acordo com o status do formulário.

Quer aprender mais sobre Angular? Veja nossa formação e aplique tudo o que aprendeu sobre validação de formulários reativos.