# ngx-forms-handle-errors

> This module is going to bind the errors from an object to your form inputs.

Latest version **1.8.0** (published 2026-03-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-forms-handle-errors
pnpm add ngx-forms-handle-errors
yarn add ngx-forms-handle-errors
bun add ngx-forms-handle-errors
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.8.0 |
| Published | 2026-03-05 |
| First published | 2021-12-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 4.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | Caue Almeida |
| Maintainers | clmeida, nerpatricia |
| Keywords | errors, angular-errors, angular |

## Links

- npm: https://www.npmjs.com/package/ngx-forms-handle-errors
- Repository: https://github.com/nncl/ngx-forms
- Homepage: https://github.com/nncl/ngx-forms#readme
- Issues: https://github.com/nncl/ngx-forms/issues
- npm.io page: https://npm.io/package/ngx-forms-handle-errors

## Dependencies (1)

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

## Alternatives

- [@sentry/react-native](https://npm.io/package/@sentry/react-native.md) — 2.6M weekly downloads
- [@ardatan/aggregate-error](https://npm.io/package/@ardatan/aggregate-error.md) — 708.1K weekly downloads
- [custom-error-generator](https://npm.io/package/custom-error-generator.md) — 2.0K weekly downloads
- [@technik-sde/prosemirror-recreate-transform](https://npm.io/package/@technik-sde/prosemirror-recreate-transform.md) — 1.5K weekly downloads
- [@suchipi/error-utils](https://npm.io/package/@suchipi/error-utils.md) — 78 weekly downloads

## Recent versions

- 1.8.0 (latest) — 2026-03-05
- 1.8.0-beta (beta) — 2026-02-12
- 1.7.0 — 2025-10-15
- 1.7.0-beta — 2025-10-14
- 1.6.2 — 2025-02-07
- 1.6.1 — 2025-02-06
- 1.6.0 — 2025-02-06
- 1.5.1 — 2024-11-14
- 1.5.1-beta — 2024-11-14
- 1.5.0 — 2024-11-13
- 1.4.1 — 2024-06-07
- 1.4.0 — 2024-06-07
- 1.3.1 — 2023-06-29
- 1.3.0 — 2023-06-29
- 1.2.2 — 2023-03-09
- … 8 more at https://npm.io/package/ngx-forms-handle-errors/versions

## README

# NgxFormsHandleErrors

This module is going to bind the errors from an object to your form inputs.

[![npm](https://img.shields.io/npm/v/ngx-forms-handle-errors.svg)](https://www.npmjs.com/package/ngx-forms-handle-errors)

[Demo](https://ngx-forms-handle-errors.surge.sh/).

## Getting Started

Install with npm:

```
npm i ngx-forms-handle-errors
```

### Import and Use

```typescript
import { updateFormErrors } from 'ngx-forms-handle-errors';
```

```typescript
// Example of errors returned from an API
const errors = {
  "fields": {
    "username": [
      "Username has already been taken"
    ],
    "email": [
      "E-mail address already exists"
    ]
  }
}

export class AppComponent {
  item: any = {};

  async save(form: NgForm) {
    if (form.valid) {
      // Simulating API request
      setTimeout(() => {
        // Binding API returned errors
        updateFormErrors(form, errors);
      }, 2000);
    }
  }
}
```

```html
<form #form="ngForm" novalidate (submit)="save(form)">
  <div class="control">
    <input type="text" #username="ngModel" [(ngModel)]="item.username" name="username">
    <pre>{{ username?.errors?.custom }}</pre>
  </div>
  
  <div class="control">
    <input type="email" #email="ngModel" [(ngModel)]="item.email" name="email">
    <pre>{{ email?.errors?.custom }}</pre>
  </div>
</form>
```

Then, you'll have the following structure:

```javascript
{
  custom: "Username has already been taken"
}
```

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