ngx-smart-errors ✨

Production-ready Angular form error handling system.
Stop writing repetitive boilerplates for error validation and start using smart, reactive messages.

🎯 The Problem

Normally, to show errors in Angular, you write this for every input:

<!-- BEFORE: ❌ Repetitive, messy, and hard to maintain -->
@if (email.invalid && (email.touched || email.dirty)) {
  <div class="error">
    @if (email.errors?.['required']) {
      <span>Email is required</span>
    }
    @if (email.errors?.['email']) {
      <span>Invalid email format</span>
    }
  </div>
}

🚀 The Solution

With ngx-smart-errors, it's zero-boilerplate:

<!-- AFTER: ✅ Clean, dynamic, and configurable -->
<input [formControl]="email" ngxError />

<!-- OR using the component -->
<ngx-error [control]="email" />

⚙️ Features

• Signals-based Reactivity: Fully reactive with Angular 17+ Signals.
• Zero Configuration: Sensible defaults for all built-in validators.
• Smart Triggers: Show errors on touched, dirty, or submit.
• Global & Local Config: Override messages globally or locally.
• Structural Directive: Append error UI automatically with a simple ngxError attribute.
• i18n Ready: Native support for multi-language message maps.
• Interpolation: Automatically Replace {requiredLength}, {min}, etc. from validator results.
• Custom Templates: Complete control over Error UI via ng-template.

📦 Installation

npm install ngx-smart-errors

🛠️ Global Configuration

Provide global error messages in your app.config.ts:

import { provideSmartErrors } from 'ngx-smart-errors';

export const appConfig: ApplicationConfig = {
  providers: [
    provideSmartErrors({
      errorMessages: {
        required: 'This field is required',
        email: 'Please enter a valid email address',
        minlength: 'Minimum length is {requiredLength} characters',
      },
      defaultTrigger: 'touched', // or 'dirty', 'submit'
      defaultLanguage: 'en',
    })
  ]
};

📖 Usage Examples

1. Simple Directive Usage

Automatically appends the error component under the input.

<input formControlName="username" ngxError />

2. Manual Component Usage

<ngx-error [control]="form.controls.password" trigger="dirty" />

3. Custom Local Messages

<ngx-error 
  [control]="email" 
  [messages]="{ 
    required: 'We really need your email', 
    email: 'That does not look like an email' 
  }" 
/>

4. UI Customization with Templates

<ngx-error [control]="email">
  <ng-template let-error>
    <div class="alert alert-danger">
      <i class="icon-warning"></i> {{ error }}
    </div>
  </ng-template>
</ngx-error>

5. Using Signals (Modern Reactive API)

import { useError } from 'ngx-smart-errors';

@Component({ ... })
export class MyComponent {
  email = new FormControl('', [Validators.required]);
  // reactive signal that updates automatically
  emailError = useError(this.email); 
}

🌍 i18n support

provideSmartErrors({
  errorMessages: {
    required: {
      en: 'Required',
      tr: 'Zorunlu alan'
    }
  },
  defaultLanguage: 'en'
});

🧪 Roadmap

• [ ] Support for Material Design (Auto-integration)
• [ ] Auto-discovery of FormGroup submission state
• [ ] Custom validation hint animations
• [ ] Support for Async Validators

🎁 License

MIT.