Skip to main content
etiquetas editadas
Enlace
fedorqui
  • 16.7k
  • 24
  • 71
  • 134
Origen Enlace

Angular validaciones en formulario reactivo

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
        ]
      ]
  });
 }`