Estoy intentando hacer un reactive form en Angular 8 pero al hacer la relación en el HTML obtengo 2 errores.
La idea es recorrer unos datos de tipo boolean y crear controles de tipos checkbox, los crea pero me salen esos errores, cuando recargo la pagina ya no me salen los errores y los crea con los valores que trae cada dato.
errorres
1) Cannot find control with name: 'nombre del control que se estoy creando'**
2) Cannot read property 'valueChanges' of undefined**
archivo ts
export class GenericInputComponent<T> {
@Input()
formField: FormField<T>;
@Input()
form: FormGroup = new FormGroup({});
formFields: FormField < FraudControl > [] =[
{
name: 'pool',
label: 'pool_fraud_control',
placeholder: 'Pool',
type: 'text',
validators: [Validators.required],
},
];
constructor() {this.createcontrol;}
createcontrol(nameParam: string, fraudList: any) {
let title = this.addcapitallettersandspaces(nameParam);
var obj = {};
obj[nameParam] = fraudList[nameParam];
let control = this.formFields.push({ name: nameParam, label: title, type: 'checkbox',
placeholder: title, disabled: true });
return control;
}
}
//nameParam: Nombre del control a crear.
//this.formFields: Formulario al cual le vamos a hacer el push
Ese es un control creado estaticamente al cual se le agregara el dinamico que quiero hacer, la siguiente funcion la inicializo en el constructor.
mi html
<form #mainForm appChildFormSubmit appParentFormSubmit [formGroup]="form">
<ng-container [ngSwitch]="formField.type">
<ng-container *ngSwitchCase="'checkbox'">
<ng-container *ngTemplateOutlet="checkboxInput;context:{$implicit:formField}"></ng-container>
</ng-container>
</ng-container>
<ng-template #selectcheckboxInput let-item>
<div class="select-wrapper">
<select [appFormError]="!item.disableError" [onlyIfSubmitted]="getOnlyIfSubmitted(item)"
class="{{ getInputClasses(item) }}" [name]="item.name" [formControlName]="item.name"
[required]="getRequired(item)" (change)="capturar($event.target.value)">
<option value="" disabled class="hidden">{{ item.placeholder | translate }}</option>
<option *ngFor="let option of item.selectOptions" [value]="option.value">{{ option.label | translate }}
</option>
</select>
</div>
</ng-template>
Alguna suguerencia para dejar de tener este error ?? desde ya gracias.
[formGroup]="form"
¿donde instancias el form en tu TyspeScript? o bueno en todo caso la pregunta seria donde esta la instancia del FormGroupform: FormGroup = new FormGroup({});
se encuentra vacío, por lo mismo no puedes usar elformControlName
porque no hay ningún control instanciado en el form, debería haber un control algo como:form: FormGroup = new FormGroup({miControl: new FormControl('')});
y así podrías usarformControlName='miControl'
en el HTML.Cannot find control with name:
se da porque no existe el nombre del control que buscas en elform