Reactive Forms (Formulários Reativos)

De fato é bem fácil trabalhar com eles, mas você pode está entrando num campo minado. Ficou curioso? Vem estudar comigo que eu te explico.

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 iremos ver uma abordagem bem simplificada do seu uso.

 // 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.

 // 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.

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.

• 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.

profileForm.get('firstName');

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.

Agora vamos deixar de enrolação e colocar a mão na massa. Clique em Formulário Simples para começarmos no nosso primeiro tutorial sobre esse tema.

Obrigado por chegar até aqui! 🤓

O Autor