ngx-validation-handling, customizable, dynamic validation messages for angular forms.
npm install ngx-validation-handling
ngx-validation-handling is an Angular library that provides customizable, dynamic validation messages for both reactive and template-driven forms.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 |