FormProvider
FormProvider
is a context provider that allows you to access the FormApi
via context.
It's can also be used to scope sections of the form that use context.
If you're using ValidatedForm
, you don't need to use this, at the top of your form.
If you're using Typescript, you lose a lot of type safety when using the context API
Usage
const MyForm = () => {
const form = useForm({
// ...etc
});
return (
<FormProvider scope={form.scope()}>
<form {...form.getFormProps()}>
{/* MyInput in this example accesses the form via context */}
<MyInput name="name" />
</form>
</FormProvider>
);
};
Scoping usage
The scoping docs give examples that pass the FormScope
around, but
you can also scope using the FormProvider
component.
const MyForm = () => {
const form = useForm({
// ...etc
});
return (
<form {...form.getFormProps()}>
<FormProvider scope={form.scope("personA")}>
<PersonForm />
</FormProvider>
<FormProvider scope={form.scope("personB")}>
<PersonForm />
</FormProvider>
</form>
);
};