Estoy tratando de configurar formControlName para un par de botones de opción, pero el problema es que el atributo que quiero vincular está dentro de un formGroup anidado y aparece este error:
EXCEPTION: Uncaught (in promise): Error: Cannot find control with name: 'pubSub'La plantilla:
<div class="form-group"> <div> <label class="col-sm-2 control-label"> Publicador/Subscriptor </label> </div> <div class="col-sm-3"> <div class="radio c-radio"> <label> <input formControlName="pubSub" type="radio" [value]="valoresPubSub.PUBLICADOR"/> <span class="fa fa-circle"></span>Publicador </label> </div> <div class="radio c-radio"> <label> <input formControlName="pubSub" type="radio" [value]="valoresPubSub.SUBSCRIPTOR"/> <span class="fa fa-circle"></span>Subscriptor </label> </div> </div> </div>El formGroup en el componente:
constructor (private fb: FormBuilder){ } ngOnInit() { this.formEnviarSolicitud = this.fb.group({ accion: [null, Validators.required], tipoModificacion: [null, Validators.required], webService: this.fb.group({ pubSub: [null] }) }); }La solución: necesito usar FormGroupName para vincular el DOM a un FormGroup, luego puedo usar formControlName para obtener los nombres de atributo que quiero:
La plantilla (nota la diferencia en la primera línea con formGroupName):
<div class="form-group" formGroupName="webService"> <div> <label class="col-sm-2 control-label"> Publicador/Subscriptor </label> </div> <div class="col-sm-3"> <div class="radio c-radio"> <label> <input formControlName="pubSub" type="radio" [value]="valoresPubSub.PUBLICADOR"/> <span class="fa fa-circle"></span>Publicador </label> </div> <div class="radio c-radio"> <label> <input formControlName="pubSub" type="radio" [value]="valoresPubSub.SUBSCRIPTOR"/> <span class="fa fa-circle"></span>Subscriptor </label> </div> </div> </div>Documentación para FormGroupName