Skip to main content
3 de 4
título editado
Lombarda Arda
  • 1.9k
  • 3
  • 25
  • 43

Como crear un formulario reactivo en ionic

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;
    }
  }
  
}
Lombarda Arda
  • 1.9k
  • 3
  • 25
  • 43