Welcome to ngx-validation-handling👋

ngx-validation-handling is an Angular library that provides customizable, dynamic validation messages for both reactive and template-driven forms.

✨Demo

See Demo page

Features

- 🛠 Customizable Validation Messages: Tailor the validation messages to suit your application's needs.
- 🔄 Dynamic Error Message Retrieval: Automatically fetch and display error messages.
- 📋 Easy Integration with Reactive Forms: Seamlessly integrate with Angular's - - reactive forms.
- 📝 Template-Driven Form Support: Supports template-driven forms for flexible validation handling.
- 🌐 Localization and Internationalization (i18n): Easily localize validation messages for different languages.
- 🎨 Styling and Customization: Style the validation messages to match your application's look and feel.
- ⏲ Debounced Error Display: Avoid flashing error messages with debounced display.
- 🔗 Integration with Third-Party Libraries: Compatible with other Angular libraries.
- ⏳ Async Validator Support: Handle asynchronous validators effectively.
- ⚙ Configurable Error Display Strategies: Customize how and when error messages are displayed.
- 🛡 Custom Validation Error Handlers: Define your own handlers for validation errors.
- 📝 Form-Wide Error Summary: Provide a summary of errors for the entire form.

🚀Getting started

Usage with reactive form

$3

#### NPM
``bash
npm i ngx-validation-handling --save
`
#### YARN
`bash
yarn add ngx-validation-handling
`

$3

`javascript
import { NgxValidationHandlingModule } from 'ngx-validation-handling';
@NgModule({
declarations: [AppComponent],
imports: [NgxValidationHandlingModule],
bootstrap: [AppComponent]
})
export class AppModule {}
`

$3

`javascript
import { Component } from '@angular/core';
import {NgxValidationHandlingService} from 'ngx-validation-handling';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
constructor(
...
private ngxValidationHandlingService:NgxValidationHandlingService
){}

}
`

$3

`javascript
ngOnInit(): void {
// After intit your form
this.ngxValidationHandlingService.setValidationHandling(this.form,
{
required: 'This field is required',
minlength: 'Minimum length should be 3',
maxlength: 'Maximum length should be 10'
}
);
}
`

### Step 5: In template use "ngx-validation-handling" component and send your from control name
`javascript

`

Usage with template-driven from

`javascript
import { Component } from '@angular/core';
import {NgxValidationHandlingService} from 'ngx-validation-handling';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
@ViewChild('form') form!:NgForm;

constructor(
private ngxValidationHandlingService:NgxValidationHandlingService
){}

ngAfterViewInit(): void {
this.ngxValidationHandlingService.setValidationHandling(this.form,
{
required: 'This field is required',
minlength: 'Minimum length should be 3',
maxlength: 'Maximum length should be 10'
}
);

`
### In your template use "ngx-validation-handling" component and send your from control name
`javascript

`

API Reference

$3

| Input | Type | Description |
| :-------- | :------- | :------------------------- |
| controlName | string | Required. Takes your input formControlName |
| fieldName | string | The name of your field |
| className | string | Add your custom className |
| style | {} | Add your custom styles |

$3

| Input | Type | Description |
| :-------- | :------- | :------------------------- |
| customErrorHandler | ValidationErrorHandler` | Method to add more customized validation errors in your control |

👤 Authors

@Mustafa-Seif

🔗 Links


📝License

MIT

🤝 Support

For support or any feedback, email mustafa.webdev7@gmail.com