Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Obter um ElementRef de FormControl criado dinamicamente em Angular

Olá Amigos,

Estou trabalhando em um formulário reativo e neste formulário alguns campos são criados dinamicamente dependendo da resposta que o usuário seleciona em outro campo. Estou precisando alterar algumas propriedades do campo criado dinamicamente, porém, estou com problemas.

Conheço o decorator @ViewChield() para buscar um objeto ElementRef e por ele alterar as propriedades do campo, porém, não encontrei formar de usar ele em campos que eu crio dinamicamente.

Alguém teria alguma dica que possa me ajudar?

Garanta sua matrícula hoje e ganhe + 2 meses grátis

Continue sua jornada tech com ainda mais tempo para aprender e evoluir

Quero aproveitar agora
5 respostas

Fala Ivan,

Se formulário é reativo do tipo FormGroup, tanto ele quanto seus campos tem uma propriedade chamada changes q pode ser sobre escrita e retornar um observable com as mudanças feitas nos campos do formulário, daí você pode fazer os tratamentos q desejar.

Olá Jefferson,

Mas com esta propriedade changes eu consigo fazer mudanças no DOM de outro componente?

Por exemplo, baseando-se em um componente select, de acordo com a opção que o usuário selecionar, alterar a propriedade de um componente input que já havia sido criado dinamicamente?

Se esse input ja está presente no DOM e com um formControlName voce pode acessa-lo sim, mais ou menos assim:

meuForm.controls.get('nomeDoInput').setValue('Novo valor');

Ah entendi, mas no meu caso, não é o valor do campo que quero alterar, preciso alterar propriedades do componente, entende?

solução!

Olá

Consegui resolver. O Angular tem um decorator chamado @ViewChildren, ele funciona de forma "similar" ao @ViewChild, porém, retorna um array com todos os elementos marcados com a template variable e desta forma, se eu tenho um formulário dinâmico, tenho também um array com todos os inputs que marquei e posso pelo índice acessar cada um individualmente.

Mais info: https://angular.io/api/core/ViewChildren#viewchildren