You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When a step component value is required in rjsf . If a user submit the form without filling the required question then getting error {
"name": "required",
"property": "Little interest or pleasure in doing things",
"message": "This field is required.",
"params": {
"missingProperty": "Little interest or pleasure in doing things"
},
"stack": "must have required property 'Little interest or pleasure in doing things'",
"schemaPath": "#/required"
}
while other antd components are working fine because other components have a id and name prop and if the user submit form without answering the required question then the scroll move to that question and below that "Field is required" message shows up.
But in case of Step component, the above error shows in the console after debugging found that the Steps component does not have id or name props.
`import { useState } from 'react';
import { Steps, Grid } from 'antd';
`
import React, { useEffect } from 'react';
import Form from '@rjsf/antd';
import useSchemaBuilder from '../../rjsfForm/useSchemaBuilder';
import { Button } from 'antd';
import { customizeValidator } from '@rjsf/validator-ajv8';
function transformErrors(errors: any, m) {
console.log({ errors });
return errors.map((error: any) => {
if (error.name === 'required') {
error.message = 'This field is required.';
}
if (error.message === 'must be equal to one of the allowed values') {
error.message = 'This field is required.';
}
if (error.name === 'minItems') {
error.message = 'Please select at least one option.';
}
return error;
});
Prerequisites
What theme are you using?
antd
Version
5.x
Current Behavior
When a step component value is required in rjsf . If a user submit the form without filling the required question then getting error
{
"name": "required",
"property": "Little interest or pleasure in doing things",
"message": "This field is required.",
"params": {
"missingProperty": "Little interest or pleasure in doing things"
},
"stack": "must have required property 'Little interest or pleasure in doing things'",
"schemaPath": "#/required"
}
while other antd components are working fine because other components have a id and name prop and if the user submit form without answering the required question then the scroll move to that question and below that "Field is required" message shows up.
But in case of Step component, the above error shows in the console after debugging found that the Steps component does not have id or name props.
`import { useState } from 'react';
import { Steps, Grid } from 'antd';
const { useBreakpoint } = Grid;
const SliderField = (props: any) => {
const screens = useBreakpoint();
const index = props.options.enumOptions.findIndex((option) => option.value === props.value) ?? '';
const [current, setCurrent] = useState(index);
const onChange = (step: number) => {
const { value } = props.options.enumOptions[step];
setCurrent(step);
props.onChange(value);
};
return (
<>
<Steps
className="select-steps"
size="small"
responsive
direction={screens['xl'] ? (props.options.enumOptions.length > 4 ? 'vertical' : 'horizontal') : 'vertical'}
progressDot={true}
current={current}
onChange={onChange}
items={props.options.enumOptions.map((result) => {
return { title: result.value, disabled: props.disabled };
})}
/>
</>
);
};
export default SliderField;
`
`
import React, { useEffect } from 'react';
import Form from '@rjsf/antd';
import useSchemaBuilder from '../../rjsfForm/useSchemaBuilder';
import { Button } from 'antd';
import { customizeValidator } from '@rjsf/validator-ajv8';
const FormLayout = ({
haveSections,
submitForm,
formSchema,
hideSubmit,
updateFormValue,
sectionName,
onFormChange,
submitBtnTxt,
...rest
}: any) => {
const [schema, uiSchema, schemaBuilder] = useSchemaBuilder();
useEffect(() => {
schemaBuilder(formSchema);
}, []);
uiSchema['ui:options'] = {
submitButtonOptions: {
norender: hideSubmit,
},
};
function transformErrors(errors: any, m) {
console.log({ errors });
}
const customFormats = {
'phone-us': /(?\d{3})?[\s-]?\d{3}[\s-]?\d{4}$/,
};
const validator = customizeValidator({ customFormats });
return (
<>
<Form
{...rest}
omitExtraData
focusOnFirstError
onChange={(data) => {
if (haveSections) {
if (!Object.keys(data.formData)?.length) {
return;
}
);
};
export default React.memo(FormLayout, (oldProps, newProps) => {
return oldProps.formSchema.questions.length === newProps.formSchema.questions.length;
});
`
Expected Behavior
If a user try to submit the form without filling the required fields. Then it should no show the error on the console.
No response
Steps To Reproduce
No response
Environment
Anything else?
No response
The text was updated successfully, but these errors were encountered: