11
respostas

Input radio dinamico

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

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!

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

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

Ja verifiquei isso, esta o mesmo nome em todos inputs

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

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">

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 :)')
    }
}

Estou em busca da solução

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

É 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

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.