JSON Forms community - Latest posts

Ajv-error not compatible with 3.7

@clysss Clysss — Mon, 16 Mar 2026 18:04:18 +0000

Sure, i’ll be happy you put the reply here:)

Ajv-error not compatible with 3.7

@lucas-koehler Lucas Koehler — Mon, 16 Mar 2026 17:43:08 +0000

Hi @clysss ,
sure you can. Note that I will post the solution here though and will mention essential facts (e.g. an installed package version).
If you can, pushing them to a small repo might be even better
Best regards,
Lucas

Ajv-error not compatible with 3.7

@clysss Clysss — Mon, 16 Mar 2026 16:42:15 +0000

Hello Lucas
,thanks a lot for your message,
Can I send you the files by email?.. including the package.json
Best regards

Ajv-error not compatible with 3.7

@lucas-koehler Lucas Koehler — Mon, 16 Mar 2026 16:25:00 +0000

Hi @clysss , there should not have been an AJV update between 3.6 and 3.7 or at least not a major version one.
Effectively, 3.7.0 uses AJV 8.13.0.
Pre-release version 3.7.0-alpha.0 uses 8.18.0. This is recommended to be used as AJV belo 8.18 has a severe security flaw.

Can you give a whole example to execute and specify which version of ajv errors you use.
It could be worth checking if you updated the ajv errros version with updating to JSON Forms 3.7. Maybe that leads to unexpected behavior.

Best regards,
Lucas

Ajv-error not compatible with 3.7

@clysss Clysss — Wed, 11 Mar 2026 19:30:51 +0000

I’m using customs ajv-errors.

after update from 3.6 to 3.7 the error messages are no more customs…

my main call looks like ;

        //i18n={{translate: translator}}

        schema={schemasQuery.data.schema as JsonSchema}

        uischema={schemasQuery.data.uiSchema}

        data={isEmpty(jsonFormData) ? schemasQuery.data.data : jsonFormData}

        renderers={renderers}

        cells={materialCells}

        ajv={xcreateAjv()}

        validationMode="ValidateAndShow"

        onChange={({ data, errors }) => {

          setJsonFormData(data);

          setJsonFormErrors(errors);

        }}

and my ajv.ts containng the xcreateajv is :

import ajvErrors from ‘ajv-errors’;

import { createAjv } from ‘@jsonforms/core’;

const formats = {

email: {

type: 'string', 

validate: (data: string) => /^\[^\\s@\]+@\[^\\s@\]+\\.\[^\\s@\]+$/.test(data),

phone: {

type: 'string',

validate: (data: string) => /^\\+\[0-9\]+$/.test(data),

url: {

type: 'string',

validate: (data: string) => /^https:\\/\\/.+/.test(data),

linkedin: {

type: 'string', 

validate: (data: string) => /^https:\\/\\/(www\\.)?linkedin\\.com\\/(in|company)\\/\[\\w-\]+\\/?$/.test(data),

// reconnaître le format SVG et arrêter les messages d’erreur //////////////////////DO NOT WORK as not in schema (in schemaui)

‘upload-logo’: {

validate: (str: string) => {

  return typeof str === 'string';

},

errorMessageKey: 'validation_svgInvalid',

errorMessage: "URL invalid - must begin with https://",

}

};

export const xcreateAjv = () => {

const myAjv=createAjv({

allErrors: true,

verbose: true,

$data: true, 

strict: false,

messages: true

});

ajvErrors(myAjv);

// Define the totalPercentage keyword

myAjv.addKeyword({

keyword: 'totalPercentage',

type: 'array',

validate: function (schema: any, data: any) {

  if (!Array.isArray(data)) return false; // Ensure data is an array

  const total = data.reduce((sum: number, entry: any) => sum + (entry.percent || 0), 0);

  return total === 100; // Check if total equals 100

},

errors: false, // Set to true if you want to use custom error messages

});

Object.entries(formats).forEach((\[name, format\]) => {

  myAjv.addFormat(name, format.validate);

});

return myAjv;

};

I tried with or without updating ajv package, both failed

which version of ajv should we use?

how should we write with new jsonforms?

Thx a lot!

Default placeholders in JsonSchema

@lucas-koehler Lucas Koehler — Tue, 17 Feb 2026 08:55:19 +0000

Hi @faridguzman91 ,
you can try setting your desired default value via the default property in the schema. Or did you already try this with

do it is with a custom generator function that extracts these values from the schema.json

E.g. in the schema

{
   "type": "string",
   "default": "mydefault"
}

Cheers,
Lucas

Default placeholders in JsonSchema

@faridguzman91 farid.guzman91 — Wed, 11 Feb 2026 10:02:13 +0000

I would like to render a schema with these example values as placeholders in my custom inputfieldrenderer.vue renderer:

//yaml  
example:
        dns:
          a_record_targets:
            - 127.0.0.1
            - 127.0.0.1
          srv_record_targets_sip:
            - address: sip1-n1.example.com
              port: 5060
              priority: 1
              weight: 50
            - address: sip1-n2.example.com
              port: 5060
              priority: 1
              weight: 50
          srv_record_targets_sips:
            - address: sips.example.com
              port: 5061
              priority: 1
              weight: 100

The way i do it is with a custom generator function that extracts these values from the schema.json and sets the placeholders in the custom renderer, is there a built in option to do this? having to do this for every renderer is quite painful.

Is the angular-material package dependency on hammerjs still needed?

@lucas-koehler Lucas Koehler — Thu, 08 Jan 2026 08:24:48 +0000

@thw0rted Thank you

Is the angular-material package dependency on hammerjs still needed?

@thw0rted James Bromwell — Wed, 07 Jan 2026 16:25:44 +0000

Done! GitHub · Where software is built

Is the angular-material package dependency on hammerjs still needed?

@lucas-koehler Lucas Koehler — Wed, 07 Jan 2026 15:44:42 +0000

Hi @thw0rted ,
thanks for bringing this up. I agree that we should remove this dependency if we can do it without (greater) regressions.
I think it might have been introduced to support the deprecated HammerModule

Could you open an issue, please?

Thanks and best regards,
Lucas

Is the angular-material package dependency on hammerjs still needed?

@thw0rted James Bromwell — Tue, 30 Dec 2025 21:07:07 +0000

I didn’t want to open this as a “bug report” as such, but can file an issue if that’s appropriate.

When building a modern Angular application using the Angular Material JSONForms package, a warning is shown because it imports the hammerjs library – the bundler complains because the package is CJS-only. On investigation, it looks like this package hasn’t been updated in a decade, and many of the browser shortcomings it aimed to address are now implemented directly in the DOM.

As far as I can tell the package is imported once at the top of angular-material/src/library/index.ts and none of its helpers are directly used in the rest of the codebase. If I’m missing something please let me know, but otherwise it seems like this import (and the package dependency) could probably be safely removed.

Error on recursive schema: Maximum recursive updates exceeded in component

@sdirix Stefan Dirix — Fri, 05 Dec 2025 16:44:20 +0000

Hi @fernandojsg,

We currently use AJV to determine the best element to show when we encounter a oneOf, however that only works if the oneOf is self-contained. If it isn’t the warning is shown and we just show the first one.

The max recursive error seems to indicate that we try to render an endlessly deep UI, which I would not have expected as the first element of the oneOf is actually the LEAF and even if we go down the branches, the rendering should stop at an empty array.

We need to check in more detail what is going wrong. Until then, feel free to debug why it tries to render endlessly deep. I would imagine something in the oneOf handling to go wrong.

Error on recursive schema: Maximum recursive updates exceeded in component

@fernandojsg Fernando Serrano — Fri, 05 Dec 2025 00:26:06 +0000

Hi everyone!
I’m working on a recursive schema that could have a leaf or a branch that could recursively have leaf/branch.
When I try to add a children I got a lot of logs from the AJV validator:

Combinator subschema is not self contained, can't hand it over to AJV

and after a while, it ends up throwing a max recursive error:

Uncaught (in promise) Maximum recursive updates exceeded in component . This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.

This is the JSON schema I’m using:

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "title": "Configuration",
  "type": "object",
  "definitions": {
    "tree_leaf": {
      "type": "object",
      "properties": {
        "value": {
          "type": "string"
        },
        "label": {
          "description": "A human readable name (if left out the value will be title cased)",
          "type": "string"
        }
      },
      "required": ["value"],
      "additionalProperties": false
    },
    "tree_branch": {
      "type": "object",
      "properties": {
        "children": {
          "description": "Array of children. Either children or value needs to be provided",
          "$ref": "#/definitions/tree_options"
        },
        "label": {
          "description": "A human readable name (if left out the value will be title cased)",
          "type": "string"
        }
      },
      "required": ["children", "label"],
      "additionalProperties": false
    },
    "tree_options": {
      "type": "array",
      "uniqueItems": true,
      "items": {
        "oneOf": [
          {
            "title": "Leaf",
            "$ref": "#/definitions/tree_leaf"
          },
          {
            "title": "Branch",
            "$ref": "#/definitions/tree_branch"
          }
        ]
      }
    },
    "tree_picker": {
      "properties": {
        "values": {
          "$ref": "#/definitions/tree_options"
        }
      },
      "additionalProperties": false
    }
  },
  "properties": {
    "tree_picker": {
      "description": "Tree picker widget",
      "$ref": "#/definitions/tree_picker"
    }
  },
  "additionalProperties": false
}

Any help will be more than welcome! Thanks!

Error when testing JsonForms with vitest

@YuriSapiens Yuri Roitburg — Tue, 02 Dec 2025 07:27:27 +0000

Hi @sdirix
Thanks for your reply and sorry for my delayed feedback.
As you suggested, I’m mocking the lodash/debounce in my tests to eliminate the timeout of debounce.
this is my mock:
vi.mock(‘lodash/debounce’, () => ({
default: (fn: (…args: any[]) => any) => {
const debounced = (…args: any[]) => {
fn(…args);
};
debounced.cancel = vi.fn();
debounced.flush = vi.fn();
return debounced;
},
}));

but still I get the ‘window is not defined’ error sometimes and only in the CI runs.

Do you have maybe a working example of such a mock for debounce?
Or a suggestion how to achieve such a mock that will work consistently?

Issues with oneOf properties

@SilentArctic — Mon, 01 Dec 2025 00:28:43 +0000

Hi @sdirix , I have tried loading the schema directly into JsonForms and get this error Uncaught MissingRefError: can’t resolve reference # from id #. JsonForms seems unable to handle the # self-reference

Async dynamic enum for autocomplete text field

@perki Perki — Thu, 27 Nov 2025 09:37:02 +0000

Thanks @lucas-koehler ,

Yes MaterialEnumControl is the component I want to customize.

I have already tried following the custom rendering guide - without success.

I’ll have a deeper look into it.

HandleChange in Custom Array Renderer (Vue)

@sdirix Stefan Dirix — Tue, 25 Nov 2025 16:21:36 +0000

Hi @FOppici,

You can always inject the raw JSON Forms building blocks and thereby recreate handleChange for your use case, e.g.

You can inject the form-wide dispatch:

const dispatch = inject(‘dispatch’);

Dispatch works on actions, so you can import Actions from @jsonforms/core , create the UPDATE action yourself and dispatch it.

Alternatively you can reuse one of the core helpers, e.g.

const { handleChange } = mapDispatchToControlProps(dispatch);

HandleChange in Custom Array Renderer (Vue)

@FOppici — Tue, 25 Nov 2025 15:28:40 +0000

Hi all. I’ve integrated JsonForms in a Vue 3 app.
I created a custom renderer for arrays. in this renderer I include an autocomplete listing different objects and I’d like to populate fields of an array item based on autocomplete selection.

Unfortunately, seems that the useJsonFormsArrayControl() method I’m using doesn’t expose the handleChange method, so I’m at a loss on how to change form status.

Worth noting I’m using the Composition API style of component definition for styling rules reasons…