¿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>