Save fields (Dynamic) in IONIC?

Question

Save fields (Dynamic) in IONIC?

Navigation

#1 by (1 votes)

1

I am creating a mobile app in which from a web page I can create surveys and apply them on the android device in Ionic I have a survey form that is generated diatonically (ie the number of questions can vary and types) The types of questions that may arise in a survey are:

True and false

Brief Respite

Multiple selection

The problem (the type of questions can be repeated is that I can have two questions of true or false type)

at the time of creating the form I use% *ngFor and then% [ngSwitch] with their respective *ngSwitchCase to see the type (all true or false type fields have: name="vf" [(ngModel)]="Form.vf" ) = > I do not know how to put names dynamically with a kind of counter the problem is when you want to bring the data in the .Ts just bring one, not the 2

thus declare the Form array

public Form = {
cliente:"",
encueestaID:"",
usuarioid:"",
vf:[],
seleccionUnica:[],
seleccionMultiple:[],
tiempotipo:[],
tiempoCantidad:[],
cantidad:[]
};

I leave the fields as vf: [] to save there as array

The question would really be how can I make angular / ionic detect that field is an array?

I leave the code of the form

<ion-list *ngFor="let preguntas of LocalPreguntas">
      <ion-card >
        <ion-card-header color="primary">
          {{ preguntas.pregunta}}
        </ion-card-header>
        <ion-card-content [ngSwitch]="preguntas.tipo">
            <!-- Respuesta Breve-->
            <ion-item  *ngSwitchCase="1" >        
                <ion-input type="text" placeholder="Respuesta" name="breve[]" [(ngModel)]="Form.breve"></ion-input>
            </ion-item>
            <!-- Respuesta Cantidad-->
            <ion-item *ngSwitchCase="2">
                <ion-label fixed >Cantidad</ion-label>
                <ion-input type="number" placeholder="0" name="cantidad" [(ngModel)]="Form.cantidad"></ion-input>    
                  <ion-select name="tipoCantidad" [(ngModel)]="Form.tipoCantidad">
                      <div *ngFor="let items of tipo2">
                        <ion-option value="{{ items.dato }}">{{ items.dato }}</ion-option>
                      </div>
                    </ion-select>            
            </ion-item>
                <!-- Respuesta Tiempo--> 
                <div  *ngSwitchCase="3" >
                    <ion-list radio-group name="tiempotipo" [(ngModel)]="Form.tiempotipo" >
                        <div *ngFor="let items of tipo3">
                            <ion-item  >
                                <ion-label  color="dark">{{ items.dato }}</ion-label>
                                <ion-radio value="{{ items.dato }}"></ion-radio>
                            </ion-item>
                      </div>
                     </ion-list>
                </div>
                  <!-- Respuesta Si o no-->
                  <div  *ngSwitchCase="4" style="display:block" >   
                      <ion-list radio-group  name="vf[]" [(ngModel)]="Form.vf" required>
                          <ion-item >
                              <ion-label  color="dark">Si</ion-label>
                              <ion-radio value="Si"></ion-radio>
                            </ion-item>
                          
                            <ion-item  >
                              <ion-label  color="dark">No</ion-label>
                              <ion-radio value="No"></ion-radio>
                            </ion-item>

                       </ion-list>
                  </div>

                   <!-- RespuestaMultiple-->
                   <div  *ngSwitchCase="5" style="display:block" >
                            <div *ngFor="let items of tipo5">
                              <ion-item >
                                  <ion-label> {{ items.dato }}</ion-label>
                                  <ion-toggle  checked="false" ></ion-toggle>
                              </ion-item>
                            </div>
                    </div>
                    <!-- respuesta  unica -->
                    <div  *ngSwitchCase="6" style="display:block" >
                          <ion-list radio-group  name="seleccionUnica" [(ngModel)]="Form.seleccionUnica" required>
                           <div *ngFor="let items of tipo6">
                              <ion-item >
                                  <ion-label  color="dark">{{ items.dato }}</ion-label>
                                  <ion-radio value="{{ items.dato }}"></ion-radio>
                              </ion-item>
                          </div>
                        </ion-list>
                    </div>

        </ion-card-content>  
      </ion-card>
   </ion-list>

ionic ionic-framework ionic3

asked by Wilfredo Aleman 13.10.2017 в 19:04

source

1 answer

Print username when logging in How to add an insert to save the name of the images in my mysql database

score 1 · Accepted Answer

first you must create the response array

  public Form = {
        cliente:"",
        clienteid:"",
        encueestaID:"",
        usuarioid:"",
        vf:[],
        seleccionUnica:[],
        seleccionMultiple:[],
        tiempotipo:[],
        tipoCantidad:[],
        cantidad:[],
        respuestaBreve:[]
   };

and the way to send it from the form to the array is as follows

   <div  *ngSwitchCase="5" style="display:block" >
                            <div *ngFor="let items of tipo5">
                                
                                  <ion-item  *ngIf="items.idpregunta==preguntas.id" >
                                    
                                      {{items.idpregunta}}
                                      <ion-label> {{ items.dato }}</ion-label>
                                      <ion-toggle  checked="false" name="chek1_seleccion" [(ngModel)]="Form.seleccionMultiple[items.idtipodato]" ></ion-toggle>
                                  </ion-item>

                            </div>
                    </div>

if you fix the solution is to put [] so that the data is saved as an array

[(ngModel)]="Form.seleccionMultiple[items.idtipodato]