Untitled
unknown
typescript
2 months ago
3.8 kB
5
Indexable
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-preguntas', templateUrl: './preguntas.component.html' }) export class PreguntasComponent 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; } }
Editor is loading...
Leave a Comment