← ArtigosFrontend

Angular Fundamentals - Reactive Forms

Entenda FormGroup, FormControl, validações e observabilidade.

17 de junho de 20264 min de leitura

AngularReactive FormsFormGroupFormControlFrontend

Introdução

Reactive Forms é a abordagem recomendada pelo Angular para construção de formulários complexos.

Ao invés de depender do template para controlar estado, o formulário passa a ser controlado pela classe TypeScript.

Isso traz:

Maior previsibilidade
Melhor testabilidade
Integração nativa com RxJS
Validações centralizadas

O que é Reactive Forms?

FormControl

Representa um único campo do formulário.

import { FormControl } from "@angular/forms";
 
name = new FormControl("");

Template:

<input [formControl]="name" />

Obtendo valor:

console.log(this.name.value);

FormGroup

Agrupa múltiplos controles relacionados.

import { FormGroup, FormControl } from "@angular/forms";
 
form = new FormGroup({
  name: new FormControl(""),
  email: new FormControl(""),
});

Template:

<form [formGroup]="form">
  <input formControlName="name" />
  <input formControlName="email" />
</form>

Obtendo valores

console.log(this.form.value);

Resultado:

{
  "name": "André",
  "email": "andre@email.com"
}

Atualizando valores

Atualização parcial:

this.form.patchValue({
  name: "André",
});

Atualização completa:

this.form.setValue({
  name: "André",
  email: "andre@email.com",
});

Validações

import { Validators } from "@angular/forms";
 
form = new FormGroup({
  email: new FormControl("", [Validators.required, Validators.email]),
});

Verificando validade:

if (this.form.valid) {
  console.log("Formulário válido");
}

valueChanges

Uma das funcionalidades mais importantes.

Reactive Forms utiliza Observables para notificar alterações.

this.form.valueChanges.subscribe((value) => {
  console.log(value);
});

Toda vez que algum campo mudar:

Usuário digita
↓
valueChanges dispara
↓
Novo valor disponível

Cenário Real

Buscar usuário por CPF.

this.form
  .get("cpf")
  ?.valueChanges.pipe(debounceTime(500), distinctUntilChanged())
  .subscribe((cpf) => {
    this.userService.search(cpf);
  });

FormBuilder

Facilita a criação de formulários.

Antes:

new FormGroup({
  name: new FormControl(""),
  email: new FormControl(""),
});

Com FormBuilder:

constructor(
  private fb: FormBuilder
) {}
 
form = this.fb.group({
  name: [""],
  email: [""],
});

Reactive Forms

Uma dúvida muito comum:

Por que utilizar Reactive Forms ao invés de Template Forms?

Casos de Uso

Dúvidas

Pergunta de Entrevista

O que é um FormGroup?

Fácil

Pergunta de Entrevista

Qual a diferença entre FormGroup e FormControl?

Fácil

Pergunta de Entrevista

Qual a diferença entre setValue e patchValue?

Médio

Pergunta de Entrevista

Por que valueChanges é tão importante?

Médio

Pergunta de Entrevista

Reactive Forms utiliza RxJS?

Difícil