Untitled

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';
import { PreguntasService } from './preguntas.service';
import { Question, Option } from './question.model';

@Component({
  selector: 'app-formulario',
  templateUrl: './formulario.component.html'
})
export class FormularioComponent implements OnInit {
  questions: Question[] = [];
  questionsForm: FormGroup;
  showOtro: boolean[] = [];

  constructor(
    private fb: FormBuilder,
    private preguntasService: PreguntasService
  ) {
    this.questionsForm = this.fb.group({
      questions: this.fb.array([])
    });
  }

  ngOnInit(): void {
    this.preguntasService.getPreguntasConOpciones().subscribe({
      next: (data) => {
        this.questions = data;
        this.buildForm();
      },
      error: (error) => console.error('Error fetching questions:', error)
    });
  }

  buildForm(): void {
    const questionsArray = this.questionsForm.get('questions') as FormArray;

    this.questions.forEach((question, index) => {
      const optionsArray = this.fb.array(
        question.options.map(option => 
          this.fb.group({
            option_id: [option.idOption],
            seleccionada: [false]
          })
        )
      );

      const otroGroup = this.fb.group({
        texto: ['', [
          Validators.required,
          Validators.minLength(3),
          Validators.maxLength(question.idQuestion === 4 ? 50 : 250),
          Validators.pattern(/^[^´'|\°><[\]{}()=&]*$/)
        ]]
      });

      questionsArray.push(
        this.fb.group({
          idQuestion: [question.idQuestion],
          options: optionsArray,
          otro: otroGroup,
          showOtro: [false]
        })
      );

      this.showOtro[index] = false;
    });
  }

  onOptionChange(questionIndex: number, optionIndex: number): void {
    const questionsArray = this.questionsForm.get('questions') as FormArray;
    const questionGroup = questionsArray.at(questionIndex) as FormGroup;
    const optionsArray = questionGroup.get('options') as FormArray;
    const optionSeleccionada = optionsArray.at(optionIndex).get('seleccionada')?.value;

    const otroOption = questionGroup.get('options')?.value.find((o: any) => o.option_id === this.questions[questionIndex].options.find(o => o.description === 'Otro')?.idOption);
    const otroIndex = questionGroup.get('options')?.value.findIndex((o: any) => o.option_id === otroOption?.option_id);

    if (optionSeleccionada && this.questions[questionIndex].options[optionIndex].description === 'Otro') {
      questionGroup.get('showOtro')?.setValue(true);
      this.showOtro[questionIndex] = true;
      questionGroup.get('otro')?.get('texto')?.setValidators([
        Validators.required,
        Validators.minLength(3),
        Validators.maxLength(this.questions[questionIndex].idQuestion === 4 ? 50 : 250),
        Validators.pattern(/^[^´'|\°><[\]{}()=&]*$/)
      ]);
      questionGroup.get('otro')?.get('texto')?.updateValueAndValidity();
    } else if (otroIndex !== -1 && !optionsArray.at(otroIndex).get('seleccionada')?.value) {
      questionGroup.get('showOtro')?.setValue(false);
      this.showOtro[questionIndex] = false;
      questionGroup.get('otro')?.get('texto')?.clearValidators();
      questionGroup.get('otro')?.get('texto')?.updateValueAndValidity();
    }
  }

  onSubmit(): void {
    if (this.questionsForm.valid) {
      console.log('Form submitted:', this.questionsForm.value);
    } else {
      console.log('Form is invalid');
    }
  }

  get questionsControls() {
    return (this.questionsForm.get('questions') as FormArray).controls;
  }
}