Como criar formulários do tipo Reactive Forms com Angular

Reactive Forms

Reactive Forms é uma das duas maneiras de criar formulários com o Angular.
Nesse tutorial você vai aprender

  • Criar um formulário com um componente
  • Usar o formControlName para criar o two-way data bindings para ler e escrever nos inputs na tela
  • Como limpar os campos na tela após submeter o formulário

Pré-requisitos

Esse tutorial foi feito utilizando o bootstrap para criação de uma interface mais amigável. Se você não sabe o que é o bootstrap, clique aqui para ver o tutorial.

Também foi utilizada a versão 7.0 do Angular.

Passo a passo para a criação do formulário

  1. Instalação do ReactiveFormsModule
  2. Criar a classe que será o modelo do formulário
  3. Criar o componente com o formulário
  4. Aplicar o formGroup no formulário formControlName nos inputs
  5. Fazer o formulário submter

1 – Instalação do ReactiveFormsModule

Antes de começar, você precisa importar o módulo ReactiveFormsModule no seu projeto.
Esse modulo possui todas as diretivas de criação de formulários do tipo Reactive Forms. É necessário efetuar o import antes de qualquer componente que use um formulário.
Para importar, é só incluir a linha abaixo no arquivo app.module.ts.

O arquivo app.module.ts deve ficar assim:

2 – Criar a classe que será o modelo do formulário

Para esse exemplo, será criado uma classe de cliente com os campos abaixo.
Para criar uma classe é só rodar o comando abaixo.

O arquivo cliente.ts deve ficar assim:

3 – Criar o componente com o formulário

O formulário no Angular é um formulário comum com a adição do formControlName para fazer o binding entre o controle na tela e o objeto de formulário que você está usando.

Criar o componente
Para criar o componente que terá o formulário, é só rodar o comando abaixo

A principio o arquivo formulario.component.html deve ficar assim:

Criação do objeto de formulário
Para fazer o binding na tela, é necessário criar um objeto que será um agrupador de inputs que existiram na tela. Esse objeto é do tipo FormGroup e os inputs são do tipo FormControl. Para criar esse objeto, você pode usar diretamente os tipos mencionados acima ou usar o FormBuilder.

Exemplo 1: Usando diretamente os tipos.
É necessário fazer o import abaixo no componente

Agora é necessário criar uma função para criação do objeto do formulário

O arquivo formulario.component.ts deve ficar assim:

Exemplo 2: Usando o FormBuilder.
É necessário fazer o import abaixo no componente

No construtor do componente você receber uma instancia do objeto FormBuilder por injeção de dependencia

Agora é necessário criar uma função para criação do objeto do formulário

O arquivo formulario.component.ts deve ficar assim:

Exibir o formulário na tela
Para ver o resultado na tela, é necessário incluir o componente de formulário no componente raiz da aplicação app.component.
O arquivo app.component.html deve ficar assim:

4 – Aplicar o formGroup no formulário formControlName nos inputs

Primeiro é necessário fazer o binding do tag form com o objeto de formulário criado.
Para isso é só adicionar a diretiva [formGroup] na tag form com o valor do nome do objeto criado para o formulário.
No exemplo acima foi criado um objeto de nome “formCliente”, logo ele será o valor do [formGroup].

Agora é hora de usar a diretiva formControlName para poder fazer o binding dos controles.
Para isso em cada input na tela será colocado o formControlName.
O arquivo formulario.component.html deve ficar assim:

Com isso todo valor que você digitar na tela será salvo na respectiva propriedade do objeto “formCliente” e todo valor que você colocar em alguma propriedade do “formCliente” será exibido na tela.
Um exemplo disso é mostrado no vídeo acima.

5 – Fazer o formulário submter

Para fazer o formulário submeter é necessário criar um método no arquivo formulario.component.ts e adicionar a chamada desse método no evento (ngSubmit) do formulário.

Método para submeter o formulário

E na tag form adicionar

Limpando os campos do formulário
Para limpar os valores preenchidos na tela de maneira você tem duas opções.

Opção 1: Chamar novamente a função createForm com um novo objeto de cliente.

Opção 2: Usar o método reset do formCliente

O exemplo completo do arquivos formulario.component.ts e formulario.component.html está abaixo:

Arquivo formulario.component.ts

Arquivo formulario.component.html

Referências