ngx-forms-handle-errors v1.3.1

NgxFormsHandleErrors

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

Demo.

Getting Started

Install with npm:

npm i ngx-forms-handle-errors

Import and Use

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

// 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);
    }
  }
}

<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:

{
  custom: "Username has already been taken"
}