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