0

Tenho 3 radio buttons, quando eu clicar em cada um deve aparecer um fomulário diferente. Procurei alguns exemplos, mas o que encontrei são apenas com duas opções.

Segue o código que tenho no momento

<div class="ui-g-12 ui-md-12 ui-lg-12 ui-fluid espacamento-baixo">
    <div class="ui-g-3"><p-radioButton value="imagem" label="Imagem" inputId="imagem"></p-radioButton></div>
    <div class="ui-g-3"><p-radioButton value="video" label="Video" inputId="video"></p-radioButton></div>
    <div class="ui-g-3"><p-radioButton value="link" label="Link" inputId="link"></p-radioButton></div>
    <div class="ui-g-3"><p-radioButton value="wistia"label="Wistia" inputId="wistia"></p-radioButton></div>    
</div>

Estva fazendo testes com divs

<div class="toggle-panel" *ngIf="show" [hidden]="hidden" [style.visibility] = "visibility">
    Teste
</div>

Essas são as funções que eu estava tentando

show =  true;
  hidden = false;
  visibility = 'visible';

  toggleShow(){
    this.show = !this.show;
  }

  toggleHidden(){
    this.hidden = !this.hidden;
  }

  toggleVisible(){
    this.visibility = this.visibility == 'visible' ? 'hidden' : 'visible';
  }

1 Resposta 1

1

Bem eu não entendi muito seu código, e fiz de uma forma que pensei aqui (não sei se é a melhor forma e de maior boa pratica a se fazer) , mais deixar aqui um exemplo para você:

utilizei inputtype radio mesmo pegando seus values em uma variavel que criei, apos isso eu só valido qual div irá aparecer conforme o input selecionado:

De uma olhada num exemplo que fiz: https://stackblitz.com/edit/angular-sa89yk

export class NomeDaSuaClass  {

  radioForm;

}

HTML

<div class="ui-g-12 ui-md-12 ui-lg-12 ui-fluid espacamento-baixo">
    <div class="ui-g-3">
      <label for="imagem">imagem</label>
      <input name="form" [(ngModel)]="radioForm" type="radio" value="imagem" label="Imagem" id="imagem">
    </div>

    <div class="ui-g-3">
       <label for="video">video</label>
      <input name="form" [(ngModel)]="radioForm" type="radio" value="video" label="Video" id="video">
    </div>

    <div class="ui-g-3">
      <label for="link">link</label>
      <input name="form" [(ngModel)]="radioForm" type="radio" value="link" label="Link" id="link">
    </div>

    <div class="ui-g-3">
      <label for="wistia">Wistia</label>
      <input name="form" [(ngModel)]="radioForm" type="radio" value="wistia" label="Wistia" id="wistia">
    </div>    
</div>

  <div *ngIf="radioForm == 'wistia'">
    <p> aqui seu formulario para {{ radioForm }}</p>
  </div>

   <div *ngIf="radioForm == 'imagem'">
    <p> aqui seu formulario para {{ radioForm }}</p>
  </div>

   <div *ngIf="radioForm == 'link'">
    <p> aqui seu formulario para {{ radioForm }}</p>
  </div>

   <div *ngIf="radioForm == 'video'">
    <p> aqui seu formulario para {{ radioForm }}</p>
  </div>
1
  • Muito obrigado, era exatamente que eu estava tentando fazer Commented 20/05/2019 às 13:18

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .