Angular Reactive Forms
Basis Tecnologia da Informação S.A. - 2019
O que é?
Reactive Forms (Formulários reativos) são formulários que se aproximam do modelo model-driven que facilitam a manutenção de formulários com inputs que atualizam com base nas mudanças.
Reactive Forms é uma das duas maneiras de criar formulários com o Angular.
O que é?
Reactive Forms utiliza uma abordagem explícita e imutável para gerenciar o estado do componente. A cada mudança no formulário é emitido um novo estado, que manterá a integridade do modelo diante as anterações.
Este tipo de abordagem também provê um caminho direto para testar o modelo, uma vez que seus dados estará consistente e previsível quando requisitado. Todos os consumidores destas requisições poderão realizar atualizações dos dados de forma segura.
Por que usar?
Imagine um formulário com muitos campos, validações complexas e lógicas condicionais, e tudo isso, ainda com a complexidade da leitura de código.
Com a utilização do Reactive Forms é possível encapsular toda a camada de validação, lógicas e campos em apenas um lugar, facilitando a manutenção e a leitura do código.
Reactive Forms vs Template driven
Reactive Forms | Template Driven |
Escalabilidade | Baixa escalabilidade |
Reutilização | Simples de utilizar |
Facilmente testado | Teste mais complexo |
Reactive Forms vs Template driven
Diferença | Reactive Forms | Template Driven |
Implementação | Mais explícita, criada na classe do componente | Menos explícita, criada por diretivas |
Modelo de dados | Estruturado | Não Estruturado |
Predictabilidade | Síncrono | Assíncrono |
Validação | Baseado em funções | Baseado em diretivas |
Mutabilidade | Imutável | Mutável |
Escalabilidade | Acesso a API de baixo nível | Abstração no topo das APIs |
Vantagens do Reactive Forms
Validações personalizadas simplificadas
Melhor legibilidade do código
Implementar atualizações de campos com base em eventos
Desabilitar partes do formulário facilmente
Implementar validações assíncronas
Isolar a validação de campos do HTML
Exemplo de formulário
No formulário a seguir há necessidade de internacionalização de quase todos os campos da aplicação, também há necessidade de validação e adição dinâmica de campos com base em dados inseridos.
Fazendo com que seja difícil a implementação do mesmo com a utilização do ngModel
Exemplo de formulário
 |
Configurando o projeto
Inicialize um novo projeto utilizando os comandos abaixo, ou utilize um pré-existente
 |
Configurando o projeto
Importe no arquivo src/app/app.module.ts (ou no módulo compartilhado da sua aplicação) o seguinte módulo:
 |
Hora de implementar
A lógica ao implementar um formulário com Reactive Forms é a seguinte:
Temos um componente que ficará responsável pelo formulário, ou seja, toda a regra de negócio deste componente está vinculada apenas à este componente.
Temos componentes responsáveis pela visualização, cadastro e edição, que utilizam o componente anterior de base.
Tipos de campos dentro do Reactive Forms
Quando se trata de campos dentro do Reactive Forms existem 3 tipos, sendo eles:
FormGroup
FormControl
FormArray
Tipos de campos dentro do Reactive Forms
FormGroup → Agrupador de campos, pode ser comparado à um Objeto
FormControl → Campo, pode ser comparado à um atributo do Objeto
FormArray → Lista de campos, pode ser comparado à um Array
Validações padrão
 |
Como instanciar um formulário
 |
Hora de praticar!
Boas Práticas
Existem algumas boas práticas que devem ser seguidas para melhorar a leitura do código e o manter estável.
Outras boas práticas podem ser encontradas na documentação do Angular, aqui citarei apenas as principais e as que são mais utilizadas no dia-a-dia
Boas Práticas
Inicializar o formulário seguindo os lifecycles do Angular.
 |
Boas Práticas
Desabilitar o formulário pela controller.
 |
Formas de acessar o estado do formulário
Para efetuar o debug do formulário, verificar seus valores ou até mesmo verificar erros, pode-se fazer das seguintes formas:
Formas de acessar o estado do formulário
Controller
 |
Formas de acessar o estado do formulário
View
 |
Formas de acessar o estado do formulário
Outra forma de debugar o formulário é escutando os valores de forma reativa, da seguinte forma:
 |
Conclusão
Com a implementação do Reactive Forms, a manutenção do código fica bem mais simples, além de facilitar o entendimento do código para outros desenvolvedores.
Há também uma melhoria na performance, uma vez que a aplicação terá a lógica de validação encapsulada em apenas um componente.
Obrigado pela participação!
Caso haja alguma dúvida no futuro, sugestão de melhoria na apresentação ou até mesmo apenas para trocarmos uma ideia, entrem em contato pelo Rocket :)
@vinicius.bastos