# 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](https://developers-friends.gitbook.io/blog/angular/reactive-forms/formulario-simples) para começarmos no nosso primeiro tutorial sobre esse tema.

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

![O Autor](https://3697290398-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7iQOq9eJJ2zoW1Ls4P%2F-M7s5H4-eQAAB-HOlvZ2%2F-M7s-eacEUwFodoje4vE%2Fcartao-arthur.png?alt=media\&token=c08176aa-78d1-42bd-9c59-22fcf8627e26)