ngx-form-err
v12.0.0
Published
Angular library for displaying your form validation errors
Downloads
2
Readme
Description
Angular library for displaying your form validation errors
Reactive and template forms, customization of error display logic, customization of messages and variables in messages are supported.
Features
- Support for reactive and templated forms
- customize error display logic:
- always
- when typing
- when you lose focus
- when submitting a form
- small markup
- change messages to your liking, for localization messages
- variable in messages, include specifics from validator (e.g. min length)
Demo
Installation
$ npm install ngx-from-err
Add the module to your application
@Module({
imports: [
BrowserModule,
NgxFormErrModule, // <- import
],
})
export class AppModule {
}
Usage
Template-driven form
<form>
<label>Firstname</label>
<input class="form-control" name="firstname" [(ngModel)]="name"
placeholder="Enter your firstname"
[required]="true"
[minlength]="2"
pattern="[a-z]*"
#nameNgModel="ngModel">
<ngx-form-err [control]="nameNgModel"></ngx-form-err>
</form>
Reactive form
Template
<form [formGroup]="userForm">
<div class="form-group mb-3">
<label>Firstname</label>
<input class="form-control" placeholder="Enter your firstname" formControlName="name">
<ngx-form-err [control]="userForm.controls.name"></ngx-form-err>
</div>
<div class="form-group">
<label>Firstname</label>
<input class="form-control" placeholder="Enter your lastname" formControlName="lastname">
<ngx-form-err [control]="userForm.controls.lastname"></ngx-form-err>
</div>
<button class="btn btn-primary mt-3" type="submit">Submit</button>
</form>
Controller
import {Component} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
userForm: FormGroup;
constructor(private formBuilder: FormBuilder) {
this.userForm = this.formBuilder.group({
name: [null, [Validators.required, Validators.minLength(2), Validators.pattern(/[a-z]*/)]],
lastname: [null, [Validators.required, Validators.maxLength(10), Validators.pattern(/[a-z -]*/)]],
});
}
}
Components
ngx-form-err
Component for displaying validation errors for one input
Inputs
| Prop | Type | Description | |------|------|-------------| | control | FormControl or NgModel | Input field controller, needed to track status and display validation errors | | mode | NgxFormErrViewMode | Type of logic for displaying errors, can display only the first validation error or a list of all validation errors | | showWhen | NgxFormErrViewLogic[] | When should validation errors be shown, an array of parameters |
Configurations
Module-level configuration
You can pass the config file when connecting the module to your application, The configuration object is of type
NgxFormErrConfig
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
NgxFormErrModule.forRoot({
mode: NgxFormErrViewMode.single,
showWhen: [NgxFormErrViewLogic.formSubmitted, NgxFormErrViewLogic.touched]
})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
Configuration when using a component
You can override config options when using component
The names of the incoming parameters match the field name in the configuration
<ngx-form-err [control]="nameNgModel" mode="single" [showWhen]="['touched']"></ngx-form-err>
Error message customization
To customize validation error messages, reload NgxFormErrStorageFactory
with your implementation, and be sure to
implement from AbstractNgxFormErrStorageFactory
.
The getErrorStorage
method must be implemented, it must return an object of type ErrorGeneratorStorage
ErrorGeneratorStorage
is an object whose keys are the name of the validator, and the value is a string or function to
generate an error message. Depending on the type of validator, additional data will be passed as the first argument to
the function to generate an error message.
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {AppComponent} from './app.component';
import {NgxFormErrModule, NgxFormErrStorageFactory} from 'ngx-form-err';
import {CustomFormErrStorageFactory} from "./custom-form-err-storage.factory";
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
FormsModule,
NgxFormErrModule
],
providers: [
// Overloading the NgxFormErrStorageFactory standard class of your own implementation
{
provide: NgxFormErrStorageFactory,
useClass: CustomFormErrStorageFactory
},
],
bootstrap: [AppComponent]
})
export class AppModule {
}
import {Injectable} from '@angular/core';
import {AbstractNgxFormErrStorageFactory, ErrorGeneratorStorage} from 'ngx-form-err';
@Injectable()
export class CustomFormErrStorageFactory implements AbstractNgxFormErrStorageFactory {
getErrorStorage(): ErrorGeneratorStorage {
// Your logic for receiving and returning error messages
return {
required: 'My custom required error message',
minlength: 'My min length message',
maxlength: (data) => `The maximum length should be no more than ${data.requiredLength}`
};
}
}
Types and Interfaces
NgxFormErrConfig
| Prop | Type | Description | |------|------|-------------| | mode | NgxFormErrViewMode | Type of logic for displaying errors, can display only the first validation error or a list of all validation errors | | showWhen | NgxFormErrViewLogic[] | When should validation errors be shown, an array of parameters
NgxFormErrViewMode
Enum
| Key | Description | |------|-------------| |single| Show only the first validation error | | all | Show all validations errors|
NgxFormErrViewLogic
Enum, configuring error display logic
| Key | Description | |------|-------------| | immediately | Show validation errors immediately | | touched | Show validation errors only when the input has lost focus | | dirty | Show validation errors when changing the model | | formSubmitted | Show validation errors after form submission |
ErrorGeneratorStorage
A type that describes a storage object for validation error messages
export type ErrorGeneratorStorage = { [key: string]: ErrorGenerator };
ErrorGenerator
The type of single error message, can be a regular string or a function
export type ErrorGeneratorDynamic = (data: any) => string;
export type ErrorGenerator = ErrorGeneratorDynamic | string;