0

tengo un problema al querer mostrar un boton diferente de acuerdo a la opcion seleccionada en un radiobutton.

el problema es que tengo que dar 2 o 3 clicks a la primera opcion del radiobutton para que me reconozca el valor, quisiera saber si hay una forma de poder establecer la primera opcion como valor predeterminado y que se ejecute automaticamente la funcion a penas carge

Este es mi codigo

Component.ts

 onChange(modificar) {
    console.log("modificar ", modificar);
  if (modificar == "modificar") {
    document.getElementById('ifYes').style.display = "block"; 
     } else if(modificar == "nuevo"){
      document.getElementById('ifYes').style.display = "none"; 
     }
}

html.

 <div class="ui-g-12">
                      <p-radioButton name="modificarp" value="modificar" label="Agregar Pregunta" [(ngModel)]="modificar"
                        inputId="preopt1" (ngModelChange)="onChange(modificar)"></p-radioButton>
                    </div>
                    <div class="ui-g-12">
                      <p-radioButton name="agregar grupo" value="nuevo" label="Nuevo Grupo" [(ngModel)]="modificar"
                        inputId="preopt2" (ngModelChange)="onChange(modificar)"></p-radioButton>
                    </div>
                  </div>
                </div>
//si es el valor es  = a modificar deberia aparecer este boton
                <div id="ifYes" style="display: none;" class="container-fluid" *ngIf="modificar === 'modificar'">
                  <h5 class="first"><strong>Seleccione el Grupo Donde va a Agregar la Pregunta:</strong></h5>
                  <span class="ui-float-label">
                    <p-dropdown [options]="grupo" [(ngModel)]="selectedGrupo" placeholder="Seleccione el Grupo"
                      optionLabel="grupo_nombre" [showClear]="true"></p-dropdown>
                  </span>
                  <div class="container-fluid">
                    <div class="ui-g">
                      <div class="ui-g-5"></div>
                      <div class="ui-g-2">
                        <button type="button" (click)="agregarpregunta(selectedGrupo.id)" pButton label="Agregar"
                          class="ui-button-success"></button>
                      </div>
                    </div>
                  </div>
                </div>

// si no, deberia aparecer este boton
                <div class="container-fluid"  *ngIf="modificar === 'nuevo'" >
                  <button type="button" (click)="CrearGrupo()" center pButton label="Siguiente"
                    class="ui-button-success"></button>
                </div>
1
  • 1
    En primer lugar, para que aparezca 'checked' al cargar, simplemente debemos añadirle el atributo 'checked' al radio button. En segundo lugar, los elementos radio button que queremos 'agrupar' digamos, deberían tener el mismo nombre. Posteriormente, en javascript puedes recorrer todos los inputs con el mismo 'name' y evaluar cuál está checked. Para finalizar, puedes lanzar, al cargar la página, un evento de 'change' al elemento creado.
    – Grommy
    Commented el 9 abr. 2020 a las 5:26

1 respuesta 1

2

He pensado que desarrollando la solución, podría resultarte más sencillo.

Por una parte, tenemos el código HTML (que tendrás que traducir a .ts, ya que lo he utilizado para probar su correcto funcionamiento):

<div>
    <input type='radio' name="acciones_grupo" value="modificar" label="Agregar Pregunta" inputId="preopt1" onchange="getAccionSeleccionada()" checked/>
    Modificar 
</div>
<div class="ui-g-12">
    <input type='radio' name="acciones_grupo" value="nuevo" label="Nuevo Grupo"inputId="preopt2" onchange="getAccionSeleccionada()"/> 
    Crear
</div>

Por otra parte el código Javascript que te permitirá detectar qué valor acción está 'checked' y lanzar la ejecución del código una vez cuando se cargue la página:

// Permite obtener el valor del radio button seleccionado en vanilla JS.

function getAccionSeleccionada() {
    var elements = document.getElementsByName('acciones_grupo');

    for (var i=0; i<elements.length; ++i)
        if (elements[i].checked)  {
            alert(elements[i].value);
            break;
        }
}

// Permite llamar a la función nada mas cargar la página.

window.onload = function() {
    getAccionSeleccionada();
};

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.