Entrar Ainda não tem acesso?

Importante

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!

11
respostas

Input radio dinamico

por Lucas Faria Moura
| 17.6k xp | 8 posts

Bom dia pessoal, to com duvida mas não é em nenhum curso da plataforma é de certa forma pessoal Seria o seguinte a duvida de como fazer oque preciso

1 - Tenho um input radio que se repete, pra varias imagens adicionadas no input file. 2 - Esse input radio ele é pra eu selecionar a foto principal entre todas essas adicionadas, tem um input radio em cada foto selecionada 3 - Quando eu clico em um input radio ele parta aquela foto como true que ela é principal, porem quando clico em outra foto ele mantem o true anterior e fica duas fotos com o principal true, mas eu só posso passar uma delas como true Como eu poderia resolver este problema?

11 respostas
por Mateus Henrique
| 1000.9k xp | 1546 posts
Instrutor

Fala Lucas, tudo bem?

Para resolver esse problema, o name de cada input deve ser o mesmo! Por exemplo:

<input type="radio" name="teste">
<input type="radio" name="teste">
<input type="radio" name="teste">
<input type="radio" name="teste">

Espero ter ajudado! Tenha um ótimo dia!

por Lucas Faria Moura
| 17.6k xp | 8 posts

Então, eu crio os inputs com base no tanto de imagens que eu passo, todos são gerados com o mesmo nome eu faço um ngFor="" que pra cada imagem eu crio um card que contem esse input radio. é exatamente o mesmo nome que passo

por Mateus Henrique
| 1000.9k xp | 1546 posts
Instrutor

Lucas, tente inspecionar o input e verificar se realmente está sendo atribuito o mesmo name, e se não está retornando nenhum erro no console

por Lucas Faria Moura
| 17.6k xp | 8 posts

Ja verifiquei isso, esta o mesmo nome em todos inputs

por Mateus Henrique
| 1000.9k xp | 1546 posts
Instrutor

Qual função você está utilizando para pegar a informação se o input está marcado ou não?

por Lucas Faria Moura
| 17.6k xp | 8 posts

Então estou com duvida realmente nesta parte, qual função poderia usar para conseguir pegar isso no momento passo somente o input type radio da maneira que passarei abaixo 

<input type="radio" id="main" name="main" value="1" formControlName="main">
por Mateus Henrique
| 1000.9k xp | 1546 posts
Instrutor

Você pode passar alguma função nesses inputs, onChange, onClick, etc... e executar alguma função (ou pode ser um arrow function mesmo) e nessa função pegar o target e após isso o valor se esta checado ou não, e logo após isso fazer o que deseja com aquilo. Algo tipo assim:

<input type="radio" id="main" name="main" value="1" formControlName="main" onClick={selectMainImage}>


function selectMainImage(event) {
    const isChecked = event.target.checked
    if(isChecked) {
        console.log('Está checado :)')
    }
}
por Lucas Faria Moura
| 17.6k xp | 8 posts

Estou em busca da solução

por Mateus Henrique
| 1000.9k xp | 1546 posts
Instrutor

Lucas, poderia por favor, me enviar o seu código completo pelo GitHub?

por Lucas Faria Moura
| 17.6k xp | 8 posts

É assim, tenho um input file multiple e pra cada img dentro dele eu gero um CARD e neste card eu tenho um campo chamado principal, que é um input radio, este que mandei acima, estou usando typescript Quando eu clico neste input ele adiciona o value="1" até ai ok, porem quando eu seleciono o input radio de outro CARD ele mantem o anterior com o value="1" e adiciona no atual também é isso que não consigo resolver

Vou salvar este codigo e te envio

por Mateus Henrique
| 1000.9k xp | 1546 posts
Instrutor

Nessa função que adicionar o value = 1, você pode, antes de adicionar esse valor, fazer um looping em todos os outros inputs setando o value como 0.

Tópicos relacionados

Mostrar mais tópicos Mostrar menos tópicos

Conteúdos Alura com o tema

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Graduação | Pós-graduação | MBA