3

Tengo que implementar unos test en ionic, las preguntas para estos test las recogo de la base de datos y las muestro. El problema lo tengo al recoger los datos.

Para empezar guardo los datos de las preguntas en un array de objetos PreguntasTest que tiene los siguientes atributos.

  id: string;
  tporden : number;
  testId: string;  
  tptexto_es: string
  tptexto_eu: string

Esta lista la muestro en el Html junto con los radio con sus respuestas.

<ion-content>
      <form (ngSubmit)="enviarRespuestas()" id="form_test"  >    
      <ion-list>
        <div >
          <div class="hilo" *ngFor="let preguntas of listaPreguntas; let i = index" >
            <div class="cabeceraTest" *ngIf="translate.currentLang=='es'" >          
                <h5>{{preguntas.tptexto_es}}          </h5>
            </div>
            <div class="cabeceraTest" *ngIf="translate.currentLang=='eu'" >          
              <h5> {{preguntas.tptexto_eu}}          </h5>
            </div>
            <div class="opciones" >
              <ion-input type="text" hidden="true" value={{preguntas.id}} name="id_pregunta" ></ion-input>
              <ion-list radio-group name="valor">
                <ion-item>
                  <ion-label>{{'test.si' | translate}}</ion-label>
                  <ion-radio value="1" ></ion-radio>
                </ion-item>
                <ion-item>
                  <ion-label>{{'test.no' | translate}}</ion-label>
                  <ion-radio value="0" ></ion-radio>
                </ion-item>
              </ion-list>
            </div>
          </div>

        </div>
      </ion-list>
  </form>

He eliminado las etiquetas del tipo formGroup o formGroupName ya que todo me esta dando errores y/o no recoge los datos de la forma adecuada.

Mi intencion es recoger los datos con la siguiente estructura:

respuestas{
  respuesta{
    id_pregunta:1,
    respuesta:0
  },
  respuesta{
    id_pregunta:2,
    respuesta:0
  },...
}

Este es el componente que hay detrás del html, tiene mucha basura de las pruebas que he realizado, así que gran parte del código es basura.

@Component({
  selector: 'page-testPreguntas',
  templateUrl: 'test-preguntas.html'
})
export class TestPreguntasPage {  
  indice: number;
  listaPreguntas: PreguntasTest[];
  cargarMas: boolean; 
  test : Test;
  formulario : FormGroup;             
  constructor(public navCtrl: NavController, public navParams: NavParams,public menuCtrl: MenuController,
    public global: GlobalVars, public platform: Platform,  public translate: TranslateService, 
    public testService: TestService,private auth: AuthService,
    public formBuilder: FormBuilder
    ) {    
      this.formulario = this.formBuilder.group({
        questions: formBuilder.array([])     
      })
      platform.ready().then(() => {
        //para actualizar los colores del idioma
        global.actualizaIdioma();

        this.translate.onLangChange.subscribe((event: LangChangeEvent) => {
            //cambiamos el idioma de los títulos de los temas
            this.cambiarLenguajeTitulo();
        });
    });
    this.test = navParams.get('test');
    this.cambiarLenguajeTitulo();
    this.indice = 0;
    this.cargarMas = false;
    this.cargarPreguntas()  
} 
/*private createMyForm(){  
  return this.formBuilder.group({

  })
}*/

  enviarRespuestas(){
    console.log("METODO ENVIAR RESPUESTAS");
    console.log(this.formulario.value)
    //console.log(this.formulario.controls[0].value);

  }

  cargarPreguntas(){
    // ESTE CODIGO RECOGE LOS DATOS DEL SERVER Y LOS GUARDA EN listaPreguntas
  }

  openMenu(){
    this.menuCtrl.open();
  }
  cambiarLenguajeTitulo(){    
    if(this.translate.currentLang=="es"){   
           this.test.titulo = this.test.tetitulo_es;
    }else{
        this.test.titulo = this.test.tetitulo_eu;
    }
  }

}
1

1 respuesta 1

3

El problema que tienes en el componente es todo ese código que has ido añadiendo de más. La creación del form podría ser algo tan sencillo como esto:

Primero creamos un FormArray:

let controls=listaPreguntas.map(() => ['',Validators.required]);
let formArray=this.formBuilder.array(controls);

Con esto ya tienes creado un FormArray, con todos los campos inicializados como vacíos y todos con un validador "required".

Lo metemos en un FormGroup:

this.formulario = this.formBuilder.group({
  questions: formArray     
});

Y de ese modo puedes generar el HTML:

<form [formGroup]="formulario">
  <div formArrayName="questions">
    <div class="hilo" *ngFor="let p of listaPreguntas; let i=index" >
      <div class="cabeceraTest">          
        <h5>{{p['tptexto_'+translate.currentLang]}} </h5>
      </div>

      <div class="opciones" >
        <ion-list radio-group [formControlName]="i" name="valor">
          <ion-item>
            <ion-label>{{'test.si' | translate}}</ion-label>
            <ion-radio value="1" ></ion-radio>
          </ion-item>
          <ion-item>
            <ion-label>{{'test.no' | translate}}</ion-label>
            <ion-radio value="0" ></ion-radio>
          </ion-item>
        </ion-list>
      </div>
    </div>
  </div>
</form>

No he trabajado nunca con Ionic, pero creo que es así como debería quedar.

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.