ng-error-message
Displays error messages when a form control is invalid avoiding the long list of tags for each error.
Reason
When developing a form, it's common to validate each input and display the errors when they exist. However, it's tediuos to write a tag for each error, something like this:
This field is required This field is not a email
The list of tags could be large depending the number of validations in the input. The purpose of this packages is to avoid doing that.
Installation
You can install the package running:
$ npm install ng-error-message --save
Usage
The first thing you need to do it's to create a json file, in the file you will have all the errors you need in your application. Every property in the json will be named as the error displayed by the form (using reactive forms), for example, when a field has an error you can write form.get('field').errors and receive the error object, by example:
// form.get('field').errors // The field is required and displays the error required: true // The field must be an email email: true // The field must be numeric and 5 as maximum length required: true maxlength: true
Then, if you want to display a message for each error, our json file needs to look like this:
// assets/example/errors.json "required": "This field is required" "email": "This field is not a email" "maxlength": "This field exceeds the maxium number of 5 characters"
Then, import NgErrorMessageModule, NgErrorMessageLoaderService, NgErrorMessageLoader in your AppModule and call the forRoot method passing it a factory provider configuration.
- NgErrorMessageModule: The module that contains the errorMessage pipe and starts the NgErrorMessageService if the forRoot method is called.
- NgErrorMessageLoaderService: This the loader class that load the specified error json file.
- NgErrorMessageLoader: This is an abstract class that is provided as token to starts the loader (NgErrorMessageLoaderService).
; // Remember to export the function { return http 'assets/example/errors.json';} @ // If you have a multilanguage app, you could do this:; // Remember to export the function { return http 'assets/example/' + navigatorlanguage + '.json';} @ // You should have multiple json files with the specific language
If you want to create a custom NgErrorMessageLoaderService you need to implement the NgErrorMessageLoader class to your custom class, for example:
// your custom class ; ; ; implements NgErrorMessageLoader {} public : Observable<any> // your code /** * example: * * return this.http.get(this.jsonUrl) * */ return // return the json file or a custom object {} // ========================================================== // your AppModule ; ; // Remember to export the function { return http 'assets/example/errors.json'; } @
NOTE: The forRoot method just will be called in the main Module, commonly AppModule. By using the Pipe just import the NgErrorMessageModule without the forRoot method.
once the NgErrorMessageModule is imported, you have to start the service to load the errors dictionary. Import the NgErrorMessageService in your AppComponent (or your boot component) and start it.
; @ implements OnInit { // It will call the json file thiserrMessageService; }
Now the service is started, you can use the errorMessage pipe in your HTML, you just need both one tag and to check if the input is invalid and all messages will be displayed in.
{{ form.get('control').errors | errorMessage }}
The pipe will display the first error found of the form control to avoid shows multiple messages, so the user modify one error at a time.
You can pass params to the pipe, this is useful for dynamic messages.
The json file:
"maxlength": "This field exceeds the maxium number of {{ max }} characters"
The html:
{{ form.get('control').errors | errorMessage : { maxlength: { max: '5' } } }}
You need to pass an object to the pipe specifying the error and its params. Another example with multiple validations in one input.
The json file:
"maxlength": "The number of characteres must be from {{ min }} to {{ max }}" "required": "The field {{ name }} is required"
The html:
{{ form.get('control').errors | errorMessage : { maxlength: { max: '5', min: '1' }, required: { name: 'Firstname' } } }}
Contribution
Test the package
Download the package and run:
$ npm run test:lib
Build the package
If you modified the package and you want to build it run:
$ npm run build:lib