mw-error-messages

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.module('myApp', ['ngMessages', 'mw-error-message']);

And use the included 'mwErrorMessage' directive thusly:

<div mw-error-message="CTRLSYSTEM_">
    <input title="" type="text" name="test" ng-model="model.test" class="form-control" required/>
</div>

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:

<div mw-error-message="CTRLSYSTEM_" mw-error-message-options="mwOptions">
    <input title="" type="text" name="test" ng-model="model.test" required/>
</div>

$scope.mwOptions = {
    icon: true,
    tooltip: true,
    success: true,
    addHelp: '<span>Additional Help block</span>'
};

If you want to use other Font icons just override this:

.has-success .wm_error_message_icon:after{
	content: "\f00c";
}
.has-error .wm_error_message_icon:after{
	content: "\f00d";
}

If you want to use more messages or change the content of the default message:

// override default message
mwConfig.messages['required'] = 'This field is required';
//add a new message
mwConfig.messages['birthday'] = 'You need to be 18 years old.';

Demo

View demo on Plunker

Tasklist

• add more examples
• add documentation
• nodejs, bower support
• fix spelling, grammar mistakes