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...
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
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!