CODEWITHSUNDEEP
javascriptreactjstypescriptreact-jsonschema-formsjsonforms
ernesto casco velazquez
ernesto casco velazquez

Reputation: 53

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

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:

enter image description here

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"
      }
    ]
  }]
}

Upvotes: 2

Views: 617

Answers (1)

Petr Tripolsky
Petr Tripolsky

Reputation: 1623

It easy with react-declarative

Link to the playground

enter image description here

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]'
    },
];

Upvotes: 0

Related Questions