1
resposta

Conceito

Existe uma diferença em utilizar formGroup, formControl ou formControlName? É uma hierarquia ou existe um caso específico que devo utilizar cada um?

Não entendi o conceito...

1 resposta

Boa tarde, Thyago! Como vai?

O formGroup é uma diretiva do Angular que associa um objeto do tipo FormGroup do seu componente ( código TS ) no seu formulário!

Exemplo Prático

// código anterior omitido.

export class MeuComponent {
     private meuForm = new FormGroup({
          meuCampo: new FormControl(''),
          // demais configurações dos campos omitidas.
     });
}
<form [formGroup]="meuForm">
     <input formControlName="meuCampo" />
</form>

Então, veja nos trechos de código anterior que eu associei o formulário HTML com a propriedade meuForm criada dentro da classe do meu componente!

Perceba também que para o construtor da classe FormGroup eu preciso passar um objeto JavaScript contendo a configuração de cada um dos meu campos que são representados através da classe FormControl! Nesse exemplo, temos apenas um único FormControl chamado de meuCampo! E, para associar o FormControl com o campo em si no HTML é que utilizamos a diretiva formControlName, cujo valor deve ser exatamente igual ao nome dado na nossa configuração na classe do componente! Nesse caso, meuCampo!

Esse passo a passo é necessário para que a validação reativa do Angular ( ou também chamada de validação orientada a modelo ) funcione como esperado!

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!