0

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.

6
  • Mmmm hay cosas que no me quedan claro en tu código, en tu HTML tienes [formGroup]="form" ¿donde instancias el form en tu TyspeScript? o bueno en todo caso la pregunta seria donde esta la instancia del FormGroup
    – Israel-ICM
    el 11 jun. 2021 a las 19:18
  • @Israel-ICM Lo edite me habia faltado esa parte del codigo al generar la pregunta.
    – Siroco-Mt
    el 11 jun. 2021 a las 19:26
  • 2
    Bien según veo al instanciar form: FormGroup = new FormGroup({}); se encuentra vacío, por lo mismo no puedes usar el formControlName 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 usar formControlName='miControl' en el HTML.
    – Israel-ICM
    el 11 jun. 2021 a las 19:32
  • Básicamente el error Cannot find control with name: se da porque no existe el nombre del control que buscas en el form
    – Israel-ICM
    el 11 jun. 2021 a las 19:33
  • Para el otro error que tienes me parece que también te falta subir alguna porción de código.
    – Israel-ICM
    el 11 jun. 2021 a las 19:35

0

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.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.