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