Vue-form-generator: Conditional fields

[lionel-bijaoui]

It would be great to have conditional fields. The value of one field influence others visibility (and maybe more ?).
For example, I check a checkbox field, and it show another field.
It could allow for very dynamic forms.
The field would need some sort of meta information about them, for example:

/*schema.js*/
fields: [{
    type: "switch",
    label: "Add a packaging ?",
    model: "packet"
}, {
    type: "select",
    label: "packet type",
    model: "packet_type",
    required: true,
    values: [
            { id: "standard", name: "Standard" },
            { id: "present", name: "Present" }
        ]
    // Only appear if packet value is true
    dependOn: [{ model: "packet", value: true }]
}, {
    type: "text",
    label: "message to write on the note",
    model: "present_note",
    // Only appear if packet_type selected value of "id" field is "present" AND if packet value is true
    dependOn: [{ model: "packet_type", field: "id", value: "present" }, { model: "packet", value: true }]
}]

They could be option for "not this value" and "multiple good values".
Internally, it could use v-show on a computed value that we could add in abstractField.js.
That's just some first ideas and thoughts, please tell me what are you think about that.

[icebob]

This is an exist function. Check the company.name field in dev example. You can set a visible function what lib will execute.

{
            type: "text",
            label: "Company name",
            model: "company.name",
            styleClasses: ["company", "half-width"],

            visible(model) {
                return model && model.type == "business";
            }
        }

So this fields is visible if the model.type is "business".

_I see it is missing from docs_

[icebob]

And the disabled properties can be a function too :) Similar as visible

[lionel-bijaoui]

Great ! Please add it to the documentation, this is a very useful functionality.

[eyleron]

Wouldn't it be nice to have a declarative way to indicate the dependency, like all the rest of the schema is, instead of functional?

[Anoesj]

It would be nice to be able to tell VFG if disabled/hidden fields should be validated too. Like, sometimes you have a hidden/disabled conditional field that is required only when it's visible/enabled.

[davidebigpicture]

https://github.com/vue-generators/vue-form-generator/issues/35#issuecomment-467933897
I mean, that snippet in the example above

visible(model) {
    return model && model.type == "business";
}

...isn't valid JSON, right?
Whereas something like JSONLogic would be valid JSON. A means, using JSON, to indicate "this field depends on that field's value x".