So I have a need for multiple custom renderers, some of which contain multiple inputs that belong to the same schema property.
This is what I did for one of them specifically and currently the one I need help with:
<template>
<v-text-field v-model="firstName" placeholder="First Name" @input="sendToUpstream" />
<v-text-field v-model="lastName" placeholder="Last Name" @input="sendToUpstream" />
</template>
<script lang="ts">
import { ControlElement, JsonFormsRendererRegistryEntry, rankWith, scopeEndsWith } from '@jsonforms/core'
import { useJsonFormsControl, RendererProps, rendererProps } from '@jsonforms/vue'
import { defineComponent } from 'vue'
import { useVanillaControl } from '@jsonforms/vue-vanilla'
const applyFormRenderName = defineComponent({
name: 'apply-form-render-name',
props: {
...rendererProps<ControlElement>(),
},
setup (props: RendererProps<ControlElement>) {
const data = useVanillaControl(useJsonFormsControl(props), target => target.value || undefined)
const firstName = ref(data.control.data?.firstName || '')
const lastName = ref(data.control.data?.lastName || '')
return {
firstName,
lastName,
...data,
}
},
methods: {
sendToUpstream () {
if (this.firstName) {
this.handleChange(this.control.path, {
...this.control.data,
firstName: this.firstName,
})
}
if (this.lastName) {
this.handleChange(this.control.path, {
...this.control.data,
lastName: this.lastName,
})
}
},
},
})
export default applyFormRenderName
export const entry: JsonFormsRendererRegistryEntry = {
renderer: applyFormRenderName,
tester: rankWith(2, scopeEndsWith('name')),
}
</script>
However, I’ve noticed that for AJV errors this doesn’t really work, since if I fill in at least one of the fields, no more errors show up. So this is probably not the best way to create this. Any suggestions on how I should do this or what I need to change so AJV works properly?
Here is the schema corresponding to this:
{
"-personal-name": {
"title": "Name",
"description": "First and last name",
"type": "object",
"properties": {
"first": {
"type": "string",
"minLength": 2,
"maxLength": 30
},
"last": {
"type": "string",
"minLength": 2,
"maxLength": 30
}
},
"required": [
"first",
"last"
]
},
}
Here is the UISchema for this property:
{"type":"Control","scope":"#/properties/-personal-name","options":{}}
Note: I’ve tried checking the ObjectRenderer in the Vue2 Vuetify renderer sets. I’m not sure I understood what is there, but do I basically need to use the DispatchRenderer component for each of the sub-schemas for AJV to work?