add $attrs

dist/vue-form.js

@@ -869,6 +869,7 @@ var validate = {
       $pending: false,
       $submitted: false,
       $error: {},
+      $attrs: {},
       _className: null,
       _id: 'vf' + randomId(),
       _setValidatorVadility: function _setValidatorVadility(validator, isValid) {
@@ -959,6 +960,10 @@ var validate = {
             return;
           }
 
+          if (attrValue) {
+            _this3.$attrs[validator] = attrValue;
+          }
+
           var result = isFunction ? _this3._validators[validator](value, attrValue, vnode) : vm.custom[validator];
 
           if (typeof result === 'boolean') {

example/component.html

@@ -17,7 +17,7 @@
 
       <validate auto-label class="form-group">
         <label>Sample component 1</label>
-        <custom-field-one required pattern="\d\d\d-\d\d\d" v-model="model.bbb" name="bbb" class="form-control"></custom-field-one>
+        <custom-field-one required pattern="\d\d\d-\d\d\d" v-model="model.aaa" name="aaa" class="form-control"></custom-field-one>
         <small class="form-text text-muted">Component with validation attributes set on the component element</small>
         <field-messages class="form-control-feedback">
           <div>Success!</div>
@@ -28,19 +28,19 @@
 
       <validate auto-label class="form-group">
         <label>Sample component 2</label>
-        <custom-field-two required v-bind="sampleData" v-model="model.ccc" name="ccc" class="form-control"></custom-field-two>
+        <custom-field-two required v-bind="sampleData" v-model="model.bbb" name="bbb" class="form-control"></custom-field-two>
         <small class="form-text text-muted">Component where validation attributes are props, along with v-bind</small>
-        <field-messages class="form-control-feedback">
+        <field-messages class="form-control-feedback" v-if="formstate.bbb">
           <div>Success!</div>
-          <div slot="minlength">Field is too short</div>
-          <div slot="maxlength">Field is too long</div>
+          <div slot="minlength">Minimum allowed characters for this field is {{formstate.bbb.$attrs.minlength}}</div>
+          <div slot="maxlength">Maximum allowed characters for this field is {{formstate.bbb.$attrs.maxlength}}</div>
           <div slot="required">Field is required</div>
         </field-messages>
       </validate>
 
       <validate auto-label class="form-group">
-        <label>Sample component 2</label>
-        <dynamic-field name="aaa" :field="sampleDynamicField" v-model="model.aaa"></dynamic-field>
+        <label>Sample component 3</label>
+        <dynamic-field name="ccc" :field="sampleDynamicField" v-model="model.ccc"></dynamic-field>
         <small class="form-text text-muted">Component where validation attributes are emitted within the component using the vf:validate event</small>
         <field-messages class="form-control-feedback">
           <div>Success!</div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-form",
-  "version": "4.8.0",
+  "version": "4.8.1",
   "description": "Form validation for Vue.js",
   "main": "dist/vue-form.js",
   "scripts": {

src/components/validate.js

@@ -125,6 +125,7 @@ export default {
       $pending: false,
       $submitted: false,
       $error: {},
+      $attrs: {},
       _className: null,
       _id: 'vf' + randomId(),
       _setValidatorVadility(validator, isValid) {
@@ -212,6 +213,10 @@ export default {
             return;
           }
 
+          if(attrValue) {
+            this.$attrs[validator] = attrValue;
+          }
+
           const result = isFunction ? this._validators[validator](value, attrValue, vnode) : vm.custom[validator];
 
           if (typeof result === 'boolean') {