Angular Library · v1.0.0

smart-form-error-mapper

Centralized validator → message config. One attribute on any input. Full i18n support. Zero repeated error boilerplate.

⚙ Global Error Message Config

Registered once in app.config.ts via provideFormErrors() — applies everywhere automatically.

// Runtime Options

[errorOnDirty] — show errors while typing

[showAll] — show all failing validators at once

Language / locale

Form completion

① Directive: appError

One attribute — error auto-injected on blur.

Full Name *

Email *

Age *

② Component: <form-error>

Explicit placement + custom validator key.

Username *

Password *

Confirm Password *

③ Instant feedback: [errorOnDirty]="true"

Toggle [errorOnDirty] above to see errors appear as you type rather than after blur.

Bio *

Website

// app.component.ts — import once
import { AppErrorDirective, FormErrorComponent } from 'smart-form-error-mapper';

// template — one attribute replaces all ngIf error boilerplate
<input formControlName="email" appError />

// show errors while typing (not just on blur)
<input formControlName="bio" appError [errorOnDirty]="true" />

// explicit placement with <form-error> component
<input formControlName="password" />
<form-error [control]="form.get('password')" [showAll]="true" />
    

// app.config.ts
import { provideFormErrors } from 'smart-form-error-mapper';

export const appConfig: ApplicationConfig = {
  providers: [
    provideFormErrors({
      required:         () => 'This field is required.',
      email:            () => 'Enter a valid email.',
      minlength:        (p) => `Min ${p.requiredLength} characters.`,
      maxlength:        (p) => `Max ${p.requiredLength} characters.`,
      min:              (p) => `Value must be ≥ ${p.min}.`,
      max:              (p) => `Value must be ≤ ${p.max}.`,
      // custom validator key:
      passwordStrength: () => 'Needs uppercase, number & symbol.',
    }),
  ],
};
    

// Works with any i18n library — example with ngx-translate
import { FORM_ERRORS } from 'smart-form-error-mapper';
import { TranslateService } from '@ngx-translate/core';

{
  provide: FORM_ERRORS,
  useFactory: (t: TranslateService) => ({
    required:  () => t.instant('validation.required'),
    minlength: (p) => t.instant('validation.minlength', p),
    email:     () => t.instant('validation.email'),
  }),
  deps: [TranslateService],
}

// en.json / es.json / fr.json / hi.json etc.
{
  "validation": {
    "required": "Ce champ est obligatoire.",
    "email":    "Adresse e-mail invalide.",
    "minlength": "Minimum {{requiredLength}} caractères."
  }
}
    