# Reactive Forms (Formulários Reativos)

## Formulários Reativos

Eles são ótimos facilitadores, pois é sempre chato aplicar validações nos formulários, tais como deixar os campos vermelhos quando houver erro de preenchimento, desabilitar um campo quando outro for preenchido e etc. Aquilo tudo que vocês já conhecem bem ou vão se deparar em algum momento.

Pois bem, meu objetivo hoje é alertar para um perigoso caminho ao utilizar os *Reactive Forms*. Ao acessarmos o site [Reactive Forms - Angular](https://angular.io/guide/reactive-forms) iremos ver uma abordagem bem simplificada do seu uso.

```typescript
 // Trechos retirados do site Reactive Forms - Angular
 
 // Aqui podemos ver a criação de um FormGroup com dois campos do tipo FormControl
 profileForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
  });
```

Acima podemos observar que um objeto do tipo FormGroup foi criado com dois FormControls **firstName** e **lastName**. Há de concordarmos que é uma forma bem simples de instanciarmos um objeto desse tipo.

```markup
 // Trecho retirados do site Reactive Forms - Angular
   
  <form [formGroup]="profileForm">
    <label>
    First Name:
    <input type="text" formControlName="firstName">
  </label>

  <label>
    Last Name:
    <input type="text" formControlName="lastName">
  </label>
</form>
```

Acredito continuarmos a concordar que o uso dos formulários reativos é bem fácil, entretanto, caso você ainda não tenha percebido o quanto essa forma apresentada é ruim e poderá trazer um prejuízo a longo prazo vou te explicar agora mesmo.&#x20;

#### &#x20;Pontos de atenção

* Criamos os atributos  **firstName** e  **lastName (*****FormControl*****)** em tempo de execução, mas o ideal seria um objeto para identificar os atributos.
* &#x20;Para usar os *controls* e definir comportamentos da tela, vamos ter que informar seus nomes como parâmetro do método ***get()***. Pelo menos para mim essa é a pior parte, imagina só você estar preso em saber o nome exato da variável ainda mais sem o *autocomplete* da IDE. Se o nome da variável mudar você terá um bom trabalho para mudar todas as referências a ela.

```typescript
profileForm.get('firstName');
```

{% hint style="warning" %}
Mas nem tudo está perdido, com o decorrer dos tutoriais iremos abordar algumas formas que melhoraram a utilização dos formulários para nós, não iremos defender uma bandeira e dizer que a nossa forma é a melhor. Simplesmente é só mais uma forma dentre as diversas que você poderá vir a encontrar.
{% endhint %}

Agora vamos deixar de enrolação e colocar a mão na massa. Clique em [Formulário Simples](/blog/angular/reactive-forms/formulario-simples.md) para começarmos no nosso primeiro tutorial sobre esse tema.

**Obrigado por chegar até aqui!** :nerd:&#x20;

![O Autor](/files/-M7s-eacEUwFodoje4vE)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developers-friends.gitbook.io/blog/angular/reactive-forms.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.