Can you use v-if's using the schema generator.

Is it possible to use v-if’s when generating forms with the schema.

Obviously you can use something like below if you were using the templates but ideally would prefer to be able to use it with the schema generator <template> <FormulateInput v-if="foo" type="text" v-model="myModel" /> </template>

[eyleron]

Assay of Conditionals in Other Libraries

vue-form-json-schema

Has a [very verbose] way of handling this: Dynamic Options Example on Code Sandbox

       "component": "div",
        "model": "age",
        "errorHandler": true,
        "displayOptions": {
          "model": "age",
          "schema": {
            "not": {
              "type": "number"
            }
          }
        },
        "fieldOptions": {
          "class": [
            "alert alert-danger"
          ]
        },
        "children": [
          {
            "component": "div",
            "fieldOptions": {
              "domProps": {
                "innerHTML": "This field is required"
              }
            }
          }
        ]
      }

Blitzar BlitzForm

A newer form generation library that puts expressions in the JSON: Docs: Dynamic Prop Based on the Value of Another Field

  {
    id: 'under18',
    component: 'input',
    type: 'checkbox',
    defaultValue: false,
    label: 'Are you under 18?',
  },
  {
    id: 'parentalConsent',
    component: 'input',
    type: 'checkbox',
    defaultValue: false,
    label: 'Do you have parental consent?',
    subLabel: 'Only applicable when under 18',
    evaluatedProps: ['disabled'],
    // component props:
    disabled: (val, { formData }) => !formData.under18,
  },

and right after that: Show or Hide a Field Based on Another Field

  {
    id: 'car',
    component: 'input',
    type: 'checkbox',
    defaultValue: false,
    label: 'Do you have a car?',
  },
  {
    id: 'carType',
    component: 'input',
    label: 'What is the brand?',
    subLabel: 'This is only shown when the first question is `true`.',
    evaluatedProps: ['showCondition'],
    showCondition: (val, { formData }) => formData.car,
  },

FormVueLate

Doesn’t bring any form field components, but has validator plugins, schema, form model, etc. Docs: Conditionally displaying an element within the schema codesandbox

  type: {
    component: FormSelect,
    label: "Schema A or B?",
    options: ["A", "B"],
  },
  aField: {
    component: FormText,
    label: "A field",
    condition: model => model.type === 'A'
  },
  bField: {
    component: FormText,
    label: 'B field',
    condition(model) {
      return model.type === 'B'
    }
  }

NCForm

Uses the concept of “dx expressions” disabled: 'dx: {{$root.person.age}} < 18'

vjsf

Conditional content using valid json, to create a “pseudo language” with if/else/then.

      "properties": {
        "booleanConditionProp": {
          "type": "boolean",
          "x-display": "switch",
          "title": "I'm a boolean used to toggle the content below"
        }
      },
      "if": {
        "required": [
          "booleanConditionProp"
        ],
        "properties": {
          "booleanConditionProp": {
            "const": true
          }
        }
      },
      "then": {
        "properties": {
          "stringProp1": {
            "type": "string",
            "title": "I'm a string available if the boolean switch is true"
          }
        }
      }

VueJS Generators

Another pretty limited library, but they are also putting expression in the JSON, for better or worse, for visible, disabled, readonly and featured(?) proeprties: Docs: Dynamic Visibility

  visible: function(model) {
    //visible if business is selected
    return model && model.type == "business";
  }

Alpaca Forms

This doesn’t use Vue but it’s an oldie that I thought I’d include. I’ll probably find some React-forms libraries’ examples later too. Alpaca uses JSON Schema Dependencies. Docs: Alpaca Conditional Dependencies Docs: Alpaca Dependencies Docs: JSON Schema Dependencies

"schema": {
        "title": "Survey",
        "type": "object",
        "properties": {
            "fan": {
                "title": "Are you an Ice Cream fanatic?",
                "type": "string",
                "enum": ["Yes", "No", "Maybe"]
            },
            "icecream": {
                "title": "I see... so what is your favorite flavor?",
                "type": "String",
                "enum": ["Vanilla", "Chocolate", "Coffee", "Strawberry", "Mint"]
            }
        },
        "dependencies": {
            "icecream": ["fan"]
        }
},
    "options": {
        "fields": {
            "fan": {
                "removeDefaultNone": true,
            },
            "icecream": {
                "dependencies": {
                    "fan": ["Yes", "Maybe"]
                }
            }
        },

The dependency is set on the triggered (shown/hidden) field, referencing the triggering field. The dependencies for enumerables appear to require setting the dependency in the schema of the fields as well as in the options.

It also appears they don’t support “if date is between”, “if this field is X and that other field is Y”. They just support “show this field if this other field(s) values are …”

---

Hope these help and spark some ideas and discussion!

Vue Formulate is the best library I’ve found for flexibility of custom components, validation, plugins, lack of verbosity, and thoughtfulness. I want schema-based form generation to be a first-class citizen. Our forms’ definitions are stored in a database, so they’re all dynamic, so the template options don’t work for us. By virtue of a URL, I need to dynamically load the right form definition from the server: no hand-crafting form templates.

Inspections: “Does this facility perform surgery?” : then show a bunch of surgery questions about surgery.

Medical Doctor License Applications: “Felony record in the past year?” " then require/display fields asking for explanation and upload documents.

Employment History: Repeater groups of fields for unlimited history. If gap in dates > 6 months: then ask for explanation. …

[justin-schroeder]

Very much so. FormKit uses a nearly Turing complete schema 😃