koumoul-dev / vuetify-jsonschema-form

Create beautiful and low-effort forms that output valid data. Published on npm as @koumoul/vjsf.
https://koumoul-dev.github.io/vuetify-jsonschema-form/latest/
MIT License
538 stars 154 forks source link

Enabling $data with Ajv for dependent field validation #367

Open marr opened 1 year ago

marr commented 1 year ago

Hi, I am fumbling my way though the documentation and trying to create a custom Ajv instance with the $data option enabled.

Am I on the right track here?

<template>
<v-form>
  <v-jsf :options="options" :schema="schema" />
</v-form>
</template>
<script setup>
import { reactive } from 'vue';
import Ajv from 'Ajv';
...schema...
const ajv = new Ajv({ $data: true });
const options = reactive({
  ajv
});
</script>

Doing so causes following warning in console:

util.ts:212 strict mode: missing type "object" for keyword "properties" at "#" (strictTypes)

This is with a schema like:

const schema = reactive({
  type: 'object',
  title: 'Password',
  required: [],
  properties: {
    password: {
      default: '',
      minLength: 4,
      title: 'Password',
      type: 'string',
      'x-props': {
        placeholder: '******',
        type: 'password'
      }
    },
    confirmPassword: {
      default: '',
      title: 'Password Confirmation',
      type: 'string',
      const: {
        $data: "1/password"
      }, 
      'x-props': {
        type: 'password'
      },
    },
  },
  if: {
    properties: {
      password: {
        not: {
          const: ''
        }
      }
    }
  },
  then: {
    required: ['password', 'confirmPassword'],
  }
})