Vue-form-generator: Vee-Validation conflict

[kiankji]

• I'm submitting a ...

  • [ ] bug report

• What is the current behavior?

By including the vee-validation package the fields of vue-form-generator disappear without showing any errors.

• What is the expected behavior?

The fields of vue-form-generator should still be visible

• What is the motivation / use case for changing the behavior?

two different forms one with vee-validation and one with vue-form-generator

• Please tell us about your environment:
  *Laravel: 5.6
  *Vue: 2.5.7
  *NPM: 6.5.1
  *Homestead on a windows machine
  
  
  
  • Version: [2.3.3]
  
  
  • Vee-Validation: [2.1.4]
  
  
  • Browser: [all ]
  
  
  • Language: [ES6/7 ]
  
  

Thanks for your help

[zoul0813]

Please provide a JSFiddle.

As VFG doesn’t claim to work with Vee Validate, and provides its own validation... I can’t consider this a bug report.

[kiankji]

Thanks for your reply
Here's the jsfiddle
https://jsfiddle.net/ha0xyc27/1/

[zoul0813]

This is a compatibility issue. I'm unfamiliar with VeeValidate itself, but looking at your example JSFiddle there is clearly a compatibility issue.

I'm not sure why you would need or want to use VeeValidate on top of VueFormGenerator though.

VFG has it's own Validation rules built-in, and you can easily integrate something like [validate.js](https://validatejs.org/) into VFG for more enhanced validation, as well as extend the validation rules in VFG.

Example for integrating validate.js with VFG,

let ValidateJsObj = {};
window.ValidateJs = new Proxy(ValidateJsObj, {
    get(target, name) {
        return (value, schema, model) => {
            let constraint = {};
            let rules = {
                [name]: _.get(schema.rules, name, true)
            };
            constraint[schema.model] = rules;
            return validate.async(
                model, 
                constraint, 
                {
                    cleanAttributes: false,
                    format: "flat"
                }
            ).then((errors) => {
                return [];
            }).catch((err) => {
                console.error('ValidateJs:catch', err);
                return err;
            });
        };
    }
});

example schema:

{
    "type": "input",
    "inputType": "number",
    "label": "Price",
    "model": "price",
    "min": 0,
    "rules": {
        "numericality": {
            "greaterThanOrEqualTo": 0
        }
    },
    "validator": [ValidateJs.numericality]
}

[kiankji]

The solution:

The injected props are: "$validator", "errors" and "fields". You can customize the names of the last 2 using the configuration

Vue.use(VeeValidate, {
errorBagName: 'somethingelse',
fieldsBagName: 'somethingelse'
});

Thanks @logaretm
https://github.com/baianat/vee-validate/issues/1809