Custom error message with Ajv-errors on nested schema

General
1

Hi,

I have tried the template part of Ajv-errors documentation in changing the displayed error message under a text field. I tried to add the same logic into my nested schema but I can’t get it to display the custom error message.

The schema i’m working on have deep layers of nested properties and items. It will be too big for me to post it here.

Please advise. Thanks in advance.

1. Single object fields based on the template provided in Ajv-errors (no issue)

image
image1562×362 22.2 KB

2. Fields inside an array (not working)

image
image1557×386 26.7 KB

schema.json

    const schema = {
        type: "object",
        properties: {
            comments: {
                type: "array",
                items: {
                    type: "object",
                    properties: {
                        message: {
                            type: "string",
                            maxLength: 5,
                        },
                        enum: {
                            type: "string",
                            enum: ["foo", "bar"],
                        },
                    },
                    errorMessage: {
                        properties: {
                            message: "size should be a number bigger or equal to 4, current value is",
                        }
                    },
                },
            },
        },
    };

uischema.json

    const uischema = {
        type: "VerticalLayout",
        elements: [
            {
                type: "Control",
                scope: "#/properties/comments",
            },
        ],
    };

3. Added allOf based on Ajv-errors documentation (not working)

image
image1556×239 11.6 KB

schema.json

const schema = {
        type: "object",
        properties: {
            comments: {
                type: "array",
                items: {
                    type: "object",
                    allOf: [
                        {
                            properties: {
                                message: {
                                    type: "string",
                                    maxLength: 5,
                                },
                                enum: {
                                    type: "string",
                                    enum: ["foo", "bar"],
                                },
                            },
                        },
                    ],
                    errorMessage: {
                        properties: {
                            message:
                                "size should be a number bigger or equal to 4, current value is",
                        },
                    },
                },
            },
        },
    };

uischema.json

    const uischema = {
        type: "VerticalLayout",
        elements: [
            {
                type: "Control",
                scope: "#/properties/comments",
            },
        ],
    };
2

Hi @newbieJson,

For scenario 2: ajv-errors is a third party offering, so I’m not sure why it goes wrong here. JSON Forms just consumes the errors from AJV as they are produced, so this can’t be an error on the side of JSON Forms.

For scenario 3: It seems our React Table renderer is not able to properly handle the allOf. This is why you get the “No applicable cell found” error. This is a bug. If you can reproduce this with the latest version of JSON Forms, please open an issue against the main repo.

3

Yes, I’m using the latest jsonform library version, “3.0.0-rc.1”

image