NgxErrorMessage

NgxErrorMessage is an Angular library that automatically displays form validation error messages for reactive, template-driven, and Signal Forms, with optional @ngx-translate support.

Features

• ✅ Automatic error display — add one directive to an input and get its error message for free
• ✅ Reactive, template-driven, and Signal Forms — same directive works for all three (Signal Forms support since v4.1)
• ✅ Signal-based — reactive by construction, zoneless-compatible (since v4.0)
• ✅ Accessible by default — aria-invalid and aria-describedby are wired onto the host input automatically, no configuration needed (since v4.1)
• ✅ Internationalization — optional integration with @ngx-translate/core via a secondary entry point, so it's not a hard dependency (secondary entry point since v4.0)
• ✅ Customizable styling — override the CSS classes used for the error container and message
• ✅ Conditional display — control exactly when an error should be shown (touched, dirty, invalid, ...)
• ✅ Configurable error priority — decide which error wins when a control fails more than one validator at once (since v4.0)
• ✅ Built-in and custom patterns — a set of ready-to-use regex patterns, plus support for your own
• ✅ Standalone-first — provideNgxErrorMessage() for standalone apps; NgxErrorMessageModule for NgModule apps (deprecated)

Live Example

Try the library right here - this is the same showcase app that lives in the repo:

Open in a new tabView source on GitHub

How It Works

Add the ngxErrorMessage directive to a form control. When the control becomes invalid (and matches the configured display condition), the directive renders the message for its first active error, resolved either from a static configuration object or from your @ngx-translate translation files.

<input formControlName="email" ngxErrorMessage />
    └─▶ control becomes invalid + touched
         └─▶ NgxErrorMessage reads control.errors
              └─▶ resolves the message for the first error key
                   └─▶ renders it next to the input

Compatibility

Latest version available for each version of Angular:

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