# ngx-valdemort

> Simple, consistent validation error messages for your Angular forms

Latest version **16.0.1** (published 2026-08-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-valdemort
pnpm add ngx-valdemort
yarn add ngx-valdemort
bun add ngx-valdemort
```

## Health

**Score 60/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 16.0.1 |
| Published | 2026-08-04 |
| First published | 2018-06-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 1 |
| Unpacked size | 122.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 205 |
| Author | Ninja Squad |
| Maintainers | ninjasquad |
| Keywords | angular, form, errors, messages, validation |

## Links

- npm: https://www.npmjs.com/package/ngx-valdemort
- Repository: https://github.com/Ninja-Squad/ngx-valdemort
- Homepage: https://github.com/Ninja-Squad/ngx-valdemort#readme
- Issues: https://github.com/Ninja-Squad/ngx-valdemort/issues
- npm.io page: https://npm.io/package/ngx-valdemort

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) 2.8.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 16.0.1 (latest) — 2026-08-04
- 16.0.0 — 2026-06-10
- 15.1.0 — 2026-01-16
- 15.0.0 — 2025-12-03
- 14.0.0 — 2025-06-12
- 13.0.0 — 2024-12-06
- 12.0.0 — 2024-05-26
- 11.0.0 — 2023-11-15
- 10.0.1 — 2023-05-05
- 10.0.0 — 2023-05-05
- 9.0.0 — 2022-11-18
- 8.1.0 — 2022-10-08
- 8.0.0 — 2022-06-03
- 7.0.0 — 2021-11-04
- 6.0.0 — 2021-05-13
- … 10 more at https://npm.io/package/ngx-valdemort/versions

## README

[![CircleCI](https://circleci.com/gh/Ninja-Squad/ngx-valdemort.svg?style=svg)](https://circleci.com/gh/Ninja-Squad/ngx-valdemort)
[![Codecov](https://codecov.io/gh/Ninja-Squad/ngx-valdemort/branch/master/graph/badge.svg)](https://codecov.io/gh/Ninja-Squad/ngx-valdemort)

# ngx-valdemort

ngx-valdemort gives you simpler, cleaner validation error messages for your Angular components.

## Why should you care?

If you've ever written forms like the following:

```html
<form [formGroup]="form" (ngSubmit)="submit()" #f="ngForm">
  <input formControlName="email" type="email" />
  @if (form.controls.email.invalid && (f.submitted || form.controls.email.touched)) {
    <div class="invalid-feedback">
      @if (form.controls.email.hasError('required')) {
        <div>The email is required</div>
      }
      @if (form.controls.email.hasError('email')) {
        <div>The email must be a valid email address</div>
      }
    </div>
  }

  <input formControlName="age" type="number" />
  @if (form.controls.age.invalid && (f.submitted || form.controls.age.touched)) {
    <div class="invalid-feedback">
      @if (form.controls.age.hasError('required')) {
        <div>The age is required</div>
      }
      @if (form.controls.age.hasError('min')) {
        <div>You must be at least {{ form.controls.age.getError('min').min }} years old</div>
      }
    </div>
  }

  <button (click)="submit()">Submit</button>
</form>
```

ngx-valdemort allows writing the above form in a simpler, cleaner way by using the `ValidationErrorsComponent`:

```html
<form [formGroup]="form" (ngSubmit)="submit()">
  <input formControlName="email" type="email" />
  <val-errors controlName="email">
    <ng-template valError="required">The email is required</ng-template>
    <ng-template valError="email">The email must be a valid email address</ng-template>
  </val-errors>

  <input formControlName="age" type="number" />
  <val-errors controlName="age">
    <ng-template valError="required">The age is required</ng-template>
    <ng-template valError="max" let-error="error">You must be at least {{ error.min }} years old</ng-template>
  </val-errors>

  <button>Submit</button>
</form>
```

Even better, you can define default error messages once, and use them everywhere, while still being able to
override them when needed:

```html
<form [formGroup]="form" (ngSubmit)="submit()">
  <input formControlName="email" type="email" />
  <val-errors controlName="email" label="The email"></val-errors>

  <input formControlName="age" type="number" />
  <val-errors controlName="age" label="The age">
    <ng-template valError="max" let-error="error">You must be at least {{ error.min }} years old</ng-template>
  </val-errors>

  <button>Submit</button>
</form>
```

It works with `ngModel` too!

```html
<input type="email" name="email" [(ngModel)]="user.email" required email #emailCtrl="ngModel" />
<val-errors [control]="emailCtrl.control" label="The email" />
```

## Support for signal forms

It works with signal forms too! You can use the same directives and components, except for `<val-errors>`
which must be replaced by `<val-signal-errors>`:

```html
<input type="email" [field]="form.email" />
<val-signal-errors [formField]="form.email" label="The email" />
```

Learn more and see it in action on [our web page](https://ngx-valdemort.ninja-squad.com/)

## Installation

Using the CLI: `ng add ngx-valdemort`

Using npm: `npm install ngx-valdemort`

Using yarn: `yarn add ngx-valdemort`

## Getting started

- Import `ValdemortModule`, and other needed classes from ngx-valdemort
- Add the module to the imports of your application module
- Use `<val-errors>` in your forms
- Enjoy!

Go further:

- define default error messages using `<val-default-errors>`
- configure the look and feel globally by injecting and customizing the `ValdemortConfig` service

## Issues, questions

Please, provide feedback by filing issues, or by submitting pull requests, to the [Github Project](https://github.com/Ninja-Squad/ngx-valdemort).

---
_Source: https://npm.io/package/ngx-valdemort · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._