AJV issues with slashes in JSON Pointer

General
1

My schema properties keys are JSON Pointers that contain forward slashes /. This posed an issue early on when I needed to create a custom UISchema, but eventually I found the encode function from JSON Forms, and used that to encode the keys when creating the UI Schema.

However, I’m now using AJV to validate form errors and this doesn’t seem to be updating correctly. For example, if I have an email schema with the email format and it’s required, only the required error will be catched. No matter what I write in the field, the email error doesn’t show. And I’ve verified that if I remove all forward slashes from the property name in the schema, this starts to works properly.

When checking the VueDevtools, I can see the required error if there is nothing written, but if I write something that is not an email, I don’t see the format email error. Maybe something is not being updated correctly due to the forward slashes.

Here is the schema I use:

{
"/personal/email": {
      "title": "Email with slash",
      "description": "Email address With Slash",
      "type": "string",
      "format": "email"
    },
}

Just in case, here is the custom renderer I use to display string controls:

<template>
    <v-text-field v-model="control.data"
                  :placeholder="control.label"
                  :error="Boolean(control.errors)"
                  :error-messages="control.errors"
                  @change="onChange" />
</template>

<script lang="ts">
import { ControlElement, JsonFormsRendererRegistryEntry, rankWith, isStringControl } from '@jsonforms/core'
import { useJsonFormsControl, RendererProps, rendererProps } from '@jsonforms/vue'
import { defineComponent } from 'vue'
import { useVanillaControl } from '@jsonforms/vue-vanilla'

const applyFormRenderText = defineComponent({
    name: 'apply-form-render-text',
    props: {
        ...rendererProps<ControlElement>(),
    },
    setup (props: RendererProps<ControlElement>) {
        return useVanillaControl(useJsonFormsControl(props), target => target.value || undefined)
    },
})

export default applyFormRenderText

export const entry: JsonFormsRendererRegistryEntry = {
    renderer: applyFormRenderText,
    tester: rankWith(2, isStringControl),
}
</script>

And here is how I’m initiating JSON Forms:

<template>
    <json-forms :data="data" 
                :renderers="renderers"
                :schema="schema"
                :uischema="uischema" 
                :ajv="customAjv"
                @change="onChange" />
</template>
<script setup>
import { createAjv } from '@jsonforms/core'
import { vanillaRenderers } from '@jsonforms/vue-vanilla'
const customAjv = createAjv()

const renderers: JsonFormsRendererRegistryEntry[] = markRaw([
    applyFormRenderText,
    ...vanillaRenderers,
])
</setup>
2

Hi @adamsilva01,

We’ll have a look. If it’s a mapping problem then the error should be somewhere here in case you want to debug yourself.

3

Hey @sdirix ,

I’ve been trying to debug that, but I’m having some issues doing the first time setup for jsonforms.
I’ll try to do what I can in the meantime to try and debug this, and I look forward to any solution for this.

Thanks

4

Hey @sdirix ,

I’ve had to put this on hold for a bit. Did you manage to have any luck in debugging this?

Thanks in advance!

5

Hey @sdirix ,

Did you manage to have a look at this?
I’d rather like to avoid having to convert both ways all fields to acceptable formats.

Thanks!

6

Hi @adamsilva01,

I took a look at the issue. As expected, the issue occurred during error matching. I created a PR to fix the issue. Once merged the fix will be part of the next (pre)release.

2 Likes