0

Estoy aprendiendo a usar formularios reactivos con el siguiente tutorial enlace

Intente mostrar los mensajes de error de las validaciones, pero en la consola me muestra lo siguiente

ERROR TypeError: "control is null"
getError crear-obra-social.component.ts:50
CrearObraSocialComponent_Template template.html:15

El metodo para mostrar los errores esta en mi .ts. Siguiendo el tutorial, el metodo recibe el nombre de un input y debe revisar las validaciones para mostrar los errores.

 public getError(controlName: string): string {
  //console.log(controlName);
  let error = '';
  const control = this.formGroup.get(controlName);
  if (control.touched && control.errors != null) {
    error = JSON.stringify(control.errors);
  }
  return error;
}

Lo llamo desde mi .html en la definicion del formulario:

<form [formGroup]="formGroup">
<!-- primer fila -->
<div fxLayout="row" fxLayoutAlign="none" >
  <mat-form-field fxFlex="40" fxFlexOffset="15" class="example-full-width">
    <mat-label>Nombre</mat-label>
    <input name="razonSocial" matInput placeholder="Ingrese el nombre" value="">
    <span>{{ getError('razonSocial')}}</span>
  </mat-form-field>
  <mat-form-field fxFlex="15" fxFlexOffset="5">
    <mat-label>Fecha de creación</mat-label>
    <input name="fechaInicioActividades" matInput [matDatepicker]="picker">
    <span>{{ getError('fechaInicioActividades')}}</span>
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>
 </div>
<!-- segunda fila -->
<div fxLayout="row" fxLayoutAlign="start start">
<div fxFlex="30" fxFlexOffset="15">
  <mat-form-field class="example-full-width">
    <mat-label>Correo</mat-label>
    <input name="correo" matInput placeholder="Ingrese un correo" value="">
    <span>{{ getError('correo')}}</span>
  </mat-form-field>
</div>
<div fxFlex="20">
  <button mat-raised-button>Agregar correo de contacto</button>
</div>
</div>
<!-- tercer fila -->
<div fxLayout="row" fxLayoutAlign="center end" >
<button fxFlex="30"  
  mat-raised-button
  (click)="register()"
  [disabled]="formGroup.invalid" 
  color="primary">
    Guardar
</button>
<button fxFlex="30" mat-raised-button color="warn">Cancelar</button>

Les copio el resto de mi .ts con el constructor y el metodo que me genera el formulario, tal vez me falte definir alguna variable o hay un error de tipeo que genera el conflicto. ` public formGroup: FormGroup;

constructor(private formBuilder: FormBuilder) { }

ngOnInit() {
 this.buildForm();
}

private buildForm(){
  this.formGroup = this.formBuilder.group({
    razonSocial: 
      ['',
        [
          Validators.required,
          Validators.minLength(3),
          Validators.maxLength(100)
        ] 
      ],
  fechaInicioActividad: 
      ['',
        [
          Validators.required,
        ]
      ],
  email: 
      ['',
        [
          Validators.required,
          Validators.maxLength(100),
          Validators.email
        ]
      ]
  });
 }`

1 respuesta 1

0

El error se debia a un error de tipeo, en mi archivo .ts, cuando defini los campos del formulario:

  • email
  • fechaInicioActividad

Pero en el .html estaba usando lo siguiente:

<input formControlName="fechaInicioActividades" matInput [matDatepicker]="picker">
    <span>{{ getError('fechaInicioActividades')}}</span>

La variable fechaInicioActividades que no esta definida en el formulario. Por lo tanto, la reemplace por la variable que defini en el form y quedo así

<input formControlName="fechaInicioActividad" matInput [matDatepicker]="picker">
    <span>{{ getError('fechaInicioActividad')}}</span>

La misma operatoria con el campo de email.

Nota: Mucho cuidado con las variables que se definen en el .ts y en el .html!! deben ser iguales!! sino dan estos errores de variables no definidas!!!

Tu Respuesta

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

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