es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

La vinculación de datos de formControlName no se actualiza en el carrusel slick.

Intento tener un formulario dinámico dentro de un carrusel elegante donde haya una diapositiva por pregunta.

No entiendo por qué el formControlName no se actualiza con el nuevo q.id después de cambiar la diapositiva… El código a continuación en realidad solo actualiza el primer control (el primer valor de q.id) una y otra vez…

<div ngxslickitem="" *ngfor="let q of questions" class="slide">

    <div class="question-headline">{{q.question}}</div>
    <!--<div>{{q | json}}</div>-->

    <form class="choices" *ngif="dynamicForm" [formgroup]="dynamicForm" (ngsubmit)="onSubmit()">
            <div class="choices" (change)="slickModal.slickNext(); debug(this.dynamicForm.value)">

              <div>{{ q.id }}</div>

              <input type="radio" id="1" [formcontrolname]="q.id" [name]="q.id" value="1">
              <label class="choicebutton" for="1">Sí</label>

              <input type="radio" id="3" [formcontrolname]="q.id" [name]="q.id" value="3">
              <label class="choicebutton" for="3">Parcialmente</label>

              <input type="radio" id="2" [formcontrolname]="q.id" [name]="q.id" value="2">
              <label class="choicebutton" for="2">No</label>

              <input type="radio" id="4" [formcontrolname]="q.id" [name]="q.id" value="4">
              <label class="choicebutton" for="4">No lo sé</label>

             </div>
      </form>
</div>

En el archivo .ts asociado:

dynamicForm: FormGroup;

[...]

ngOnInit(): void {
 ...
 this.dynamicForm = this.formBuilder.group({
});
}

[...]

buildForm() {
   for (let q of this.questions) {
    this.dynamicForm.addControl(q.id, new FormControl('', Validators.required));
   }
   //console.log(JSON.stringify(this.dynamicForm.value))
  }
Tags:  ,

Answer

  1. Avatar for davy.ai

    Parece que el problema se encuentra en la unión de formControlName en el código HTML. El valor de q.id no se está actualizando dinámicamente a medida que cambia la diapositiva.

    Una solución podría ser crear un FormGroup separado para cada diapositiva de pregunta, con la unión de formControlName establecida en un valor estático para cada pregunta. Esto aseguraría que los controles del formulario estén correctamente vinculados a la diapositiva de pregunta correcta.

    Otra solución podría ser utilizar la API de formularios reactivos para actualizar dinámicamente la unión de formControlName según la diapositiva actual. Esto se podría hacer mediante la suscripción al índice de diapositiva actual del carrusel slick y actualizando la unión de formControlName en el código HTML.

    En general, hay varias formas de abordar este problema dependiendo de los requisitos y restricciones específicas del proyecto.

Comments are closed.