mw-error-messages
mw-error-messages is an AngularJS module that wrap the ngMessage into a easy to use directive for error validation. It has several features like an icon in the input field or to show that a field is valid and invalid.
Requirements (tested in)
- Angular (v1.6.6)
- NgMessages (v1.6.6)
- Bootstrap (v3.3.7) used as default grid system
- (Optional) FontAwsome (4.3.0) or another font if you want to use icons
- (Optional) ui-bootstrap (2.5.0)
Install
You can install this package either with npm
or with bower
.
npm
npm install mw-error-messages --save
bower
bower install mw-error-messages
Usage
Once the script is included in your html file, simply include the module in your app:
angular;
And use the included 'mwErrorMessage' directive thusly:
The content of mw-error-message is used as the label or if you use a translation directive its used as a prefix combined with the name of the input field. In this example the marker would be 'CTRLSYSTEM_TEST'.
If you use the required attribute, a '*' will be placed behind the label to mark this field as required. This also works with ng-required.
Config
Name | Type | Description |
---|---|---|
icon | boolean | Use icons or not |
icon_template | string | Define the icon template |
success | boolean | Show success or not |
label_classes | array | Set label classes |
div_inner_classes | array | Set inner div classes |
div_outer_classes | array | Set additional outer div classes |
help_block_classes | array | Set help block classes |
additional_help_block | string | Template for addtional help block |
messages | array | Associative array. Key field are the "when directive" value is the message. |
translate | boolean | Should the translate filter be used |
icon, success and addtional_help_block can be changed in the html like:
$scopemwOptions = icon: true tooltip: true success: true addHelp: '<span>Additional Help block</span>';
If you want to use other Font icons just override this:
If you want to use more messages or change the content of the default message:
// override default messagemwConfigmessages'required' = 'This field is required';//add a new messagemwConfigmessages'birthday' = 'You need to be 18 years old.';
Demo
Tasklist
- add more examples
- add documentation
- nodejs, bower support
- fix spelling, grammar mistakes