Dynamically set schema

[wdfinch]

I had an idea for a feature based on one of my use cases. What do you all think of dynamically being able to change the scheme (yup in my case) of a useForm? So for example a method call setScheme that could change out a schema at any point.

Use case:
I have a parent component that can be passed a child component. The child component has a form in it and the parent doesn't know what child it will receive. The parent needs to know if the child form is valid and manipulate it. Rather than use custom context and repeat logic to sync in all the child forms, it's easier to have the useForm hook in the parent and use the useFromContext in the children to communicate. This does mean that the child would choose the schema rather than the parent for validation and it could change as new children are mounted. Would be cool if I could change out the schema easily when a new child form is mounted.

[bluebill1049]

Thanks @wdfinch.I think you can pretty sure do that at the resolver now and pass down the context to switch the schema within. is this what you refer to?

[charleshimmer]

@wdfinch what you ended up doing? We are migrating from Formik to react hook form, and with formik had a similar setup where children components (we called them SubForms) could register their yup schema with the parent form's schema.

@bluebill1049 I'm using the yup resolver from here: https://github.com/react-hook-form/resolvers. How would we pass the context down?

[RasenGUY]

is this already resolved ? im trying to do something similar to wdfinch, im also wondering how to pass the context down

[yudielcurbelo]

A setScheme method will be really helpful to be able to change the schema from useFormContext

[bombillazo]

Im able to do this via a setState value in the component I use useForm from, setting the validationSchema value here and passing the setter to my Form components where I need to update the validationSchema from.

I was wondering if there was a way to set the schema after the useForm hook?

All this would be much more streamlined if RHF provided a setValidationSchema function one could call from the useFormContext/useForm hooks.

[ashrafnazar]

Has anyone come up with a solution for this? If so, a working example would be reaaaaally helpful 🙏

[chamatt]

+1 on this. Same use case, we have subforms (sections) inside the main form with conditionally rendered sections. I'd like to place the validation for a section inside the section itself, without piling up everything inside the parent component which makes everything too cumbersome to maintain.

A setValidationSchema/updateValidationSchema would be an amazing edition. I'm working on building a custom implementation for my company, if successful I'll share the results here.

[ehudkaldor]

hi all,
@bluebill1049 , any update on this making it into the code? this is exactly what i came here looking for - i am building a form from blocks, and i want each block to be able to add its own resolver (schema?) to the form, either with a default one or with one provided by the block's props. it is pretty cool i can use a Controller in the block thanks to useFormContext, which makes it more annoying that i cannot do the same for the resolver :)

[ggmartins091]

I'm trying to do something similar, I have a useFieldArray, and each item on the array can have different schemas, I use the formContext for this, but there is no way for me to add custom validation to theese items.

what chamatt proposed looks very nice, I'll probably have tweak something to be able to change the schema for a specific index of my fieldArray, but this is nice.

[chamatt]

After months of usage of the code above I'd recommend against using it, at least in the current form. It is a bit brittle and can easily lead to infinite-rerendering if used wrong. I also couldn't get it to work when running tests with jest for some reason. Another part that isn't great for me is that it hides the validation from the parent, it kind of just inserts itself up there, which may cause unexpected behavior if you don't know the children has a built-in validation (like when using someone else's code)

Now-days I'm using another strategy, which is to make the component define it's own partial validation schema and export it, then I import it in the parent and assemble it into a complete schema.

If you establish some patterns it can get quite straightforward, and the fact that you visibly assemble it in the parent, makes it clear that a validation is present (updateSchema kinda hides it)

Example:

FormSectionOne.tsx

type FormSectionOneFormValues = {
  formSectionOne?: {
    // ...
  }
}

FormSectionOne = (parentForm: UseFormReturn<T & FormSectionOneFormValues>) => {
  const form = narrowForm<FormSectionOneFormValues>(parentForm)
  
  return (...)
}

FormSectionOne.getValidationSchema = (t: TFunction) =>  Yup.object().shape<FormSectionOneFormValues>({ 
     formSectionOne: Yup.object().shape({ ... }) 
})

ParentComponent.tsx

type ParentComponentFormValues = { example1: string } & FormSectionOneFormValues

const ParentComponent = () => {
  const validationSchema = useMemo(() => ParentComponent.getValidationSchema(t), [t])

  const form = useForm<ParentComponentFormValues>({
    resolver: yupResolver(validationSchema),
  })
  
  return (...)
}

ParentComponent.getValidationSchema = (
  t: TFunction,
): Yup.Schema<ParentComponentFormValues> => Yup.object()
    .shape({
        example1: Yup.string().required(),
        ...FormSectionOne.getValidationSchema(t).fields,  // <-- important part
    }).required()

[carolineartz]

@chamatt thx this is helpful for what I'm trying to do right now. What does narrowForm look like?

[chamatt]

Glad it was helpful to you! Here's more details: https://github.com/orgs/react-hook-form/discussions/9345#discussioncomment-4132235

[AhmedBaset]

[outdated see the update below]

It appears that form options are mutable

react-hook-form/src/logic/createFormControl.ts

Lines 1420 to 1425 in 61524ae

	set _options(value) {
	_options = {
	..._options,
	...value,
	};
	},

Then we can do:

const { control } = useFormContext<T>();
// ...
if (someCondition) {
    // (optional) clearErrors() and revalidate after setting the new schema
	control._options = {
	  resolver: zodResolver(createZodSchema({ type, action })),
	}
}

Update:

A better way I ended up using, is the proposed by the maintainer

I think you can pretty sure do that at the resolver now and pass down the context to switch the schema within.

const [context, setContext] = useState(...)
const form = useForm<Type>({
    context: context,
    resolver: (values, context: typeof context, options) => {
      // you can return the schema based on context.
      // for my use case, I can depend on formValues
      const isSomeCondition = values.someValue === someValue;
      const createResolver = zodResolver(
        getOrderSchema({
          type: isSomeCondition ? "some-value" : "some-value-else",
        })
      );
      return createResolver(values, context, options);
    },
    // ...
});

Then, when RHF needs to validate it will pass formValues, context, and some options

react-hook-form/src/logic/createFormControl.ts

Lines 405 to 419 in 61524ae

	const _executeSchema = async (name?: InternalFieldName[]) => {
	_updateIsValidating(name, true);
	const result = await _options.resolver!(
	_formValues as TFieldValues,
	_options.context,
	getResolverOptions(
	name || _names.mount,
	_fields,
	_options.criteriaMode,
	_options.shouldUseNativeValidation,
	),
	);
	_updateIsValidating(name);
	return result;
	};

[homocodian]

what's the context here in Updated section?

[AhmedBaset]

Any value you pass to useForm

useForm({
  context: { ... },
})

[ashrafnazar]

Is there a working example?

[Narixius]

@ashrafnazar This is how I came across this situation

const baseSchema = z.object({
  ...
})
const specialSchema = z.object({
  ...
})

const MyComponent = () => {
  const schema = useRef(baseSchema);
  const form = useForm({
    context: {
      schema
    },
    resolver: (...opts) => {
      return zodResolver(opts[1].schema.current)(...opts).finally(() => {
        // reset to default schema
        schema.current = baseSchema;
      })
    }
  })
  const save = () => { ... }

  const handleSubmit = () => {
    form.handleSubmit(save)();
  }

  const handleSpecialSubmit = () => {
    // right before handling submit, update the validation schema
    schema.current = specialSchema;
    form.handleSubmit(save)();
  }

  return <div> ....</div>
}

So here I have 2 different submit handlers, handleSubmit works with baseSchema and handleSpecialSubmit works with specialSchema.