angular wrapper for input validation
npm install mw-error-messagesnpm or with bower.
shell
npm install mw-error-messages --save
`
$3
`shell
bower install mw-error-messages
`
Usage
Once the script is included in your html file, simply include the module in your app:
`javascript
angular.module('myApp', ['ngMessages', 'mw-error-message']);
`
And use the included 'mwErrorMessage' directive thusly:
`html
`
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:
`html
`
`js
$scope.mwOptions = {
icon: true,
tooltip: true,
success: true,
addHelp: 'Additional Help block'
};
`
If you want to use other Font icons just override this:
`css
.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:
`js
// override default message
mwConfig.messages['required'] = 'This field is required';
//add a new message
mwConfig.messages['birthday'] = 'You need to be 18 years old.';
``