NgxErrorMessage

NgxErrorMessage es una librería de Angular que muestra automáticamente mensajes de error de validación para formularios reactivos, template-driven y Signal Forms, con soporte opcional de @ngx-translate.

Características

• ✅ Visualización automática de errores — agregá una directiva a un input y obtené su mensaje de error gratis
• ✅ Formularios reactivos, template-driven y Signal Forms — la misma directiva funciona para los tres (soporte de Signal Forms desde v4.1)
• ✅ Basada en signals — reactiva por construcción, compatible con zoneless (desde v4.0)
• ✅ Accesible por defecto — aria-invalid y aria-describedby se configuran automáticamente en el input, sin necesidad de configuración (desde v4.1)
• ✅ Internacionalización — integración opcional con @ngx-translate/core vía un entry point secundario, así que no es una dependencia obligatoria (entry point secundario desde v4.0)
• ✅ Estilos personalizables — sobrescribí las clases CSS usadas para el contenedor y el mensaje de error
• ✅ Visualización condicional — controlá exactamente cuándo se debe mostrar un error (touched, dirty, invalid, ...)
• ✅ Prioridad de errores configurable — decidí cuál error gana cuando un control falla más de un validador a la vez (desde v4.0)
• ✅ Patrones incorporados y personalizados — un conjunto de patrones regex listos para usar, más soporte para los tuyos
• ✅ Standalone-first — provideNgxErrorMessage() para apps standalone; NgxErrorMessageModule para apps con NgModule (deprecado)

Ejemplo en Vivo

Probá la librería acá mismo - es la misma app de showcase que vive en el repo:

Open in a new tabView source on GitHub

Cómo Funciona

Agregá la directiva ngxErrorMessage a un control de formulario. Cuando el control se vuelve inválido (y coincide con la condición de visualización configurada), la directiva renderiza el mensaje de su primer error activo, resuelto desde un objeto de configuración estático o desde tus archivos de traducción de @ngx-translate.

<input formControlName="email" ngxErrorMessage />
    └─▶ el control se vuelve inválido + touched
         └─▶ NgxErrorMessage lee control.errors
              └─▶ resuelve el mensaje del primer error
                   └─▶ lo renderiza junto al input

Compatibilidad

Última versión disponible para cada versión de Angular:

ngx-error-message	Angular
4.1.0	20.x a 22.x
4.0.0	20.x a 22.x
3.1.0	16.x a 19.x
3.0.1	16.x a 19.x
3.0.0	16.x a 19.x
2.2.1	10.x a 14.x
2.2.0	10.x a 14.x
2.1.0	9.x a 13.x
2.0.1	8.x a 11.x
2.0.0	8.x a 11.x
1.3.0	9.x 8.x 7.x