# Generate error in custom component

**URL:** <https://jsonforms.discourse.group/t/generate-error-in-custom-component/2430>\
**Category:** General\
**Created:** [November 7, 2024, 2:12am UTC](https://jsonforms.discourse.group/t/generate-error-in-custom-component/2430 "2024-11-07T02:12:35Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![clysss](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/clysss/32/996_2.png) [@clysss](https://jsonforms.discourse.group/u/clysss)\
**Post date:** [November 7, 2024, 2:12am UTC](https://jsonforms.discourse.group/t/generate-error-in-custom-component/2430/1 "2024-11-07T02:12:35Z")

</div>

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);

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [November 7, 2024, 7:34am UTC](https://jsonforms.discourse.group/t/generate-error-in-custom-component/2430/2 "2024-11-07T07:34:50Z")

</div>

Hi @clysss,

Ideally you [implement a custom validator for `AJV`](https://ajv.js.org/keywords.html), 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](https://jsonforms.io/docs/middleware).

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.

---

<div class="post-metadata">

**Author:** ![clysss](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/clysss/32/996_2.png) [@clysss](https://jsonforms.discourse.group/u/clysss)\
**Post date:** [November 7, 2024, 7:43am UTC](https://jsonforms.discourse.group/t/generate-error-in-custom-component/2430/3 "2024-11-07T07:43:48Z")

</div>

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 🙂

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 ?

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [November 7, 2024, 8:10am UTC](https://jsonforms.discourse.group/t/generate-error-in-custom-component/2430/4 "2024-11-07T08:10:06Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![clysss](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/clysss/32/996_2.png) [@clysss](https://jsonforms.discourse.group/u/clysss)\
**Post date:** [November 7, 2024, 8:37am UTC](https://jsonforms.discourse.group/t/generate-error-in-custom-component/2430/5 "2024-11-07T08:37:17Z")

</div>

Thanks Stefan for your precisions, I understand better 🙂  
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 ?

---

<div class="post-metadata">

**Author:** ![clysss](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/clysss/32/996_2.png) [@clysss](https://jsonforms.discourse.group/u/clysss)\
**Post date:** [November 28, 2024, 10:46pm UTC](https://jsonforms.discourse.group/t/generate-error-in-custom-component/2430/6 "2024-11-28T22:46:34Z")

</div>

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 😉