0

¿Cómo puedo añadir formControlName dentro de un componente?; he intentado varios acercamientos y no he logrado desacoplar las preguntas en componentes, el cuestionario tienen mas de 400 preguntas

Uno de los errores que se me ha presentado ha sido Error: formControlName must be used with a parent formGroup directive

Componente Padre

@Component ( {
               selector    : 'app-cuestionario',
               templateUrl : './cuestionario.component.html',
               styleUrls   : [ './cuestionario.component.scss' ],
             } )
export class CuestionarioComponent implements OnInit {
  forma : FormGroup;

  constructor(
    public fb : FormBuilder,
  ) {

    this.forma = this.fb.group (
      {
        preg1      : [ null ],
        preg2      : [ null ],
        preg3      : [ null ],
        preg4      : [ null ],
      },
    );
}
}

HTML Padre

<form [formGroup]="forma" novalidate>
      <app-pregunta
        [listaPreguntas]="listaPreguntas"
        formControlName="preg2"
        name="preg2"
      ></app-pregunta>
</form>

Componente Hijo

@Component ( {
               selector    : 'app-pregunta',
               templateUrl : './pregunta.component.html',
               styleUrls   : [ './pregunta.component.scss' ],
             } )
export class PreguntaComponent implements OnInit, AfterViewInit {
  @Input () listaPreguntas : any[];
  @Input () control : FormControl;
  @Input () noPregunta : any;
  @Input () group : FormGroup;
  listaOpciones : any = [
     { nombre : 'Opción 1', value : 1, titulo : 'NO sirve para nada' },
     { nombre : 'Opción 2', value : 2, titulo : 'Me sirve un poco.' },
     { nombre : 'Opción 3', value : 3, titulo : 'Me sirve mucho' },
     { nombre : 'Opción 4', value : 4, titulo : 'Me sirve totalmente.' },
  ];

  constructor() {
  }
}

HTML Hijo

<div [formGroup]="group" class="container mt-4">
  <div class="row d-flex justify-content-center text-center">
    <div class="col-md-8">
      <mat-radio-group
        class="mt-5"
        required>
        <mat-radio-button
          *ngFor="let opcion of listaOpciones"
          [matTooltip]="opcion.titulo"
          [value]="opcion.value"
          class="ml-4"
          matTooltipClass="tooltip-red"
          matTooltipPosition="below">
          {{ opcion.nombre }}
        </mat-radio-button>
      </mat-radio-group> 
    </div>
  </div>
  </div>
</div>
2
  • Revisa este hilo, tal vez sea tu solución
    – David
    el 29 ago. 2019 a las 3:10
  • Creo que de pronto no has entendido que es lo que necesito, necesito anidar un componente hijo dentro de un padre pasándole un formControlName
    – Gdaimon
    el 29 ago. 2019 a las 3:14

2 respuestas 2

1

justamente acabo de implementar esto hace un día y me encontraba en exactamente la misma situación. Te dejaré un ejemplo muy sencillo y ya me dices si necesitas uno exactamente con tu código.

Con esta implementación ya después podrás acceder a sus valores mediante la propiedad del padre que tiene el formulario. Así:

this.formulario.get('correo').value

Componente Padre

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
    selector: 'app-componente-padre',
    templateUrl: './app-componente-padre.component.html',
    styleUrls: ['./app-componente-padre.component.css']
})
export class ComponentePadreComponent implements OnInit {
    // Propiedad del padre
    formulario: FormGroup;

    constructor() {}

    ngOnInit() {
       this.formulario = new FormGroup({
          correo:       new FormControl('', Validators.required),
       });
    }

}

HTML del Padre

<form [formGroup]="formulario">

  <!-- Label es la propiedad @Input dentro del componente hijo, igual que el formulario y ese viene de la propiedad del padre. -->
  <app-componente-hijo [formulario]="formulario" label="correo"></app-componente-hijo>

</form>

Componente Hijo

@Component({
    selector: 'app-componente-hijo',
    templateUrl: './app-componente-hijo.component.html',
    styleUrls: ['./app-componente-hijo.component.css']
})
export class ComponenteHijoComponent implements OnInit {

    @Input() formulario: FormGroup;
    @Input() label: string;

    constructor() { }

    ngOnInit() {
    }

}

HTML del Hijo

<!-- Esto lo maneja Angular. 'formulario' es el @Input -->
<div [formGroup]="formulario">
  <!-- Lo mismo con 'label' -->
  <select [formControlName]="label">
    <option value="">Seleccionar correo...</option>
  </select>
</div>
2
  • mil gracias, era lo que buscaa
    – Gdaimon
    el 31 ago. 2019 a las 3:23
  • @Gdaimon No hay de qué. Si te sirvió, márcala como respuesta. el 31 ago. 2019 a las 17:11
0

creo que lo estas viendo al revés, el hijo no tiene que contener la lista de preguntas ya que se lo estas pasando como input desde el padre. Creo que el problema es que aún no queda claro como funcionan los 'formularios reactivos'

1
  • realmente los hijos siempre van a tener las mismas opciones, lo que va a cambiar son las preguntas, pero necesito que cada componente tenga su propio formControlName y que emita su valor al padre
    – Gdaimon
    el 28 ago. 2019 a las 5:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.