Nessa aula vamos reelaborar nosso formulário para usar o sistema de formulários reativos do Angular adicionando mais validadores, na próxima aula veremos validações avançadas usando os formulários reativos. Para nossos estudos vamos salvar os itens no localstorage.

O que é um formulário reativo? Um formulário reativo é baseado na construção de instâncias do tipo FormGroup e FormControl e, a partir disso, é possível criar formulários dinâmicos e mais complexos.

Em um formulário reativo não precisamos fazer o binding diretamente usando [(ngModel]), mas sim usamos a diretiva formControlName para dizer qual propriedade de um formgroup será associada ao conteúdo do componente ou input.

Ao contrário do formulário template-driven, o formulário reativo é criado programaticamente no código TypeScript e não depende diretamente do template HTML para ser criado e validado. Isso traz mais flexibilidade e controle para a criação de formulários e, em geral, é recomendado para aplicações que precisam de validações e lógicas mais avançadas.

Com o formulário reativo, é possível criar validações personalizadas, reagir a mudanças em campos específicos, criar formulários com campos dependentes e mais complexos, além de ser mais fácil de testar e de trabalhar em equipe.

Em resumo, o formulário reativo é uma abordagem mais programática e flexível para construir formulários em aplicações Angular, trazendo mais controle e poder para as validações e lógicas de interação com o usuário.

Transformando o formulário anterior em reativo

Vamos recriar o mesmo formulário de pessoa. Para isso, adicione um novo componente: pessoa-add-reactive.ts  e seu correspondente html.

No componente, adicione:

O código acima cria um FormGroup em que cada propriedade é um FormControl que recebe um array contendo o valor inicial, nesse caso, string vazia para todos, e opcionalmente validações e outras informações.

Poderíamos criar os elementos diretamente como New FormGroup e New FormControl mas a maneira mais rápida de se fazer é através de um FormBuilder conforme recebemos um no construtor.

Nosso método, salvar verifica se o formulário está válido e executa e apresenta uma mensagem apropriada, mas não estamos validando nada por enquanto.

Vamos ver o html:

Repare nas diferenças entre um formulário template driven:

• Usamos a diretiva [formGroup] na tag formulário para dizer qual formulário estamos acoplando (é possível fazer subforms também).
• Adicionamos o (ngSumit) conforme o outro formulário também, não há diferenças aqui.
• Removemos todos os [(ngModel)] e adicionamos o formControlName que deve bater com o nome da propriedade criada pelo formbuilder (cada uma das chaves do objeto passado como parâmetro).
• Colocamos o botão com type submit dentro do formulário, assim o método salvar do (ngSubmit) vai disparar no click desse botão.