Angular 20

14 - Formulário Reativo

Olá pessoal, na décima quarta aula do treinamento de Angular 20, iremos trabalhar com formulários reativos.

O que é um formulário reativo?

O formulário reativo, é um objeto que possui funcionalidades interessantes, como:

• Ligação com componentes de formulário (input, select e textarea), através dos seus atributos.
• Validações no próprio objeto, via Validators.

O que difere o formulário reativo (ReactiveForms) de um formulário convencional (FormsModule), é:

• No formulário reativo, as verificações são realizadas no arquivo TS. Já no formulário convencional, validamos via arquivo HTML.
• Formulários reativos trabalham exclusivamente com objetos, formulários convencionais são flexíveis, podendo adotar variáveis ou objetos.

Quando usar um formulário reativo

Formulários reativos são amplamente utilizados quando há formulários complexos. Não apenas em números de elementos HTMLs, como: input, select e textarea, mas também pelas validações que os campos devem ter.

Como implementar

Podemos criar um componente (ng g c formulario-reativo), e estruturar da seguinte maneira:

No arquivo TS, importe o módulo: imports: [ReactiveFormsModule], em seguida vamos implementar o arquivo TS:

No arquivo HTML, implemente a seguinte estrutura:

Abaixo deixo um vídeo mostrando cada etapa desta aula: