Generate error in custom component

General
1

hello,
I’ve a custom component based on (unwrapped) MaterialTextControl
I want to add custom validation of data and generate a error if the data is not like I want (I can’t just use standard schema rules) and I need this validation inside the custom component
I know I should use ajv… but how should I write the call ? is there somewhere some example ?..

Thanks !

import React from “react”;
import {
ControlProps,
isStringControl,
RankedTester,
rankWith,
WithClassname,
JsonSchema,
} from “@jsonforms/core”;
import { withJsonFormsControlProps, useJsonForms } from “@jsonforms/react”;
import { Unwrapped } from “@jsonforms/material-renderers”;
import { Grid } from “@mui/material”;
const { MaterialTextControl } = Unwrapped;

export const MyMaterialTextControl: React.FC<ControlProps & WithClassname> = (
props
) => {
const ctx = useJsonForms();
const schema = props.schema as JsonSchema
const label = ${props.label}@;

return (


<MaterialTextControl {…props} label={label} />


);
};

export const MyMaterialTextControlTester: RankedTester = rankWith(
5,
isStringControl
);

export default withJsonFormsControlProps(MyMaterialTextControl);

1 Like
2

Hi @clysss,

Ideally you implement a custom validator for AJV, thereby you would automatically get the validation for your text control without needing a custom renderer.

Alternatively you can implement the custom validation as part of a middleware for JSON Forms.

In case you really really want to manage the validation as part of the custom renderer (not recommended), then you could either just show it locally (without it being emitted as an error), and/or collect the error in some React context outside of JSON Forms.

3

Ok : is it possible to implement this custom validator inside the custom component ?
why is it not recommended ? I’m not sure to understand the background :slight_smile:

suppose for example data==“” then I want to put one more error in jsonforms.error (or jsonforms.additionalerrors) to be able to block the submit of the document
How can I write this ?

4

If the custom validator is implemented within the custom renderer, then the validation is tied to rendering.

The most principled solution is a custom AJV validator as this is independent of any UI. For example you can then also validate your data on the backend if that’s a use case for you.

The second most principled solution is to validate within a middleware as this makes sure that the validation is never missing and the error integrates directly with the errors emitted by JSON Forms change events.

When validating in a custom renderer then you need to do the error management yourself as JSON Forms assumes that the validation is pure JSON Schema / AJV based. The cleanest implementation in this case would be to implement a custom action (or extend the data update action) which is again handled by a custom middleware.

5

Thanks Stefan for your precisions, I understand better :slight_smile:
I’ll go more deeply in middleware to see how I can do that

I understand that JSON Forms.errors assumes that the validation is pure JSON Schema / AJV based.
Perhaps, I understand also better the concept of additionnalsError in this case !
So perhaps I could throw a additionnalError instead of a Error ?
Can I do that inside my custom component ?

6

finaly, I’ve created a custom ajv validator corresponding to my component…

so the validation is done out of the component
but my custom component prepare data to be easily validate by ajv. Perhaps my way of doing can help other reflexions :wink:

1 Like