How to display custom error message in JSON Forms for Typescript?

Question

This is my TSX code:

import React, { FC, ReactElement } from "react";

//jsonforms import
import { useState } from "react";
import {
  materialRenderers,
  materialCells,
} from "@jsonforms/material-renderers";
import { JsonForms } from "@jsonforms/react";
import schema from "./schema.json";
import uischema from "./uischema.json";
import { createAjv } from "@jsonforms/core";

const InputTextField: FC = (): ReactElement => {
  const [data, setData] = useState({});
  const renderers = [...materialRenderers];
  const ajv = createAjv();

  ajv.addFormat("email", "[a-z0-9]+@[a-z]+.[a-z]{2,3}");

  return (
    <JsonForms
      ajv={ajv}
      schema={schema}
      uischema={uischema}
      data={data}
      renderers={renderers}
      cells={materialCells}
      onChange={({ data, errors }) => setData(data)}
    />
  );
};

export default InputTextField;

I've been trying to validate the email field with regex like this: ajv.addFormat("email", "[a-z0-9]+@[a-z]+.[a-z]{2,3}");

By passing the format in the schema (see below) now the field is correctly validated. However, the error message is the following:

How can I customize that error message?

For all the code, I've been following this tutorial. However, the section for customizing error message does not work. Seems like "inline" parameter inside ajv.addKeyword is no longer available.

My JSON Forms version is: ^3.0.0 I'm using TypeScript and React

I have the following schema:

{
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "minLength": 3,
      "description": "Please enter your name"
    },
    "birthDate": {
      "type": "string",
      "format": "date"
    },
    "email": {
      "type": "string",
      "description": "Please enter your email.",
      "format": "email"
    }
  },
  "required": ["email"]
}

And UI Schema:

{
  "type": "VerticalLayout",
  "elements": [{
    "type": "HorizontalLayout",
    "elements": [{
        "type": "Control",
        "scope": "#/properties/name"
      },
      {
        "type": "Control",
        "scope": "#/properties/email"
      },
      {
        "type": "Control",
        "scope": "#/properties/birthDate"
      }
    ]
  }]
}

Petr Tripolsky · Accepted Answer · 2024-05-28 10:39:16Z

It easy with react-declarative

Link to the playground

import { TypedField, FieldType } from "react-declarative";

export const fields: TypedField[] = [
   {
        type: FieldType.Text,
        title: 'Only number allowed',
        description: 'Which will not be greater or lower than 42',
        name: 'text',
        isInvalid(obj) {
            if (isNaN(obj.text)) {
                return 'It is not a number';
            }
            if (obj.text != 42) {
                return 'The number is greater or lower than 42';
            }
            return null;
        },
    },
    {
        name: 'email',
        type: FieldType.Text,
        isInvalid:  ({ email }) => {
            const expr = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g;
            if (!expr.test(email)) {
                return 'Invalid email address provided';
            }
            else {
            return null;
            }
        },
        title: 'Email',
        description: '[email protected]'
    },
];

Collectives™ on Stack Overflow

How to display custom error message in JSON Forms for Typescript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related