Form composition create reusable component using withForm
I want to create an Address Component that can be included in other forms. This component should just extend the existing form values with the address values:
However I cannot get the form to work as expected. The Fields render correctly but when I fill in the inputs, the SubmitButton does not think the input is valid (SubmitButton is the same as in docs).
const formSchema = z.object({
newField: z.string().min(1),
// Nest the address fields under an 'address' key
...AddressSchema.shape,
});
type AllFormFields = z.infer<typeof formSchema>;
export default function Home() {
const form = useAppForm({
defaultValues: {} as AllFormFields,
validators: {
onBlur: formSchema,
},
onSubmit: async ({ value }) => {
console.log(value);
},
});
return (
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
<form
onSubmit={(e) => {
e.preventDefault();
e.stopPropagation();
form.handleSubmit();
}}
>
<form.AppField
name="newField"
children={(field) => (
<field.TextField label="some textfield" />
)}
/>
<AddressForm form={form}></AddressForm>
<form.AppForm>
<form.SubmitButton>Senden</form.SubmitButton>
</form.AppForm>
</form>
</main>
</div>
);
}const formSchema = z.object({
newField: z.string().min(1),
// Nest the address fields under an 'address' key
...AddressSchema.shape,
});
type AllFormFields = z.infer<typeof formSchema>;
export default function Home() {
const form = useAppForm({
defaultValues: {} as AllFormFields,
validators: {
onBlur: formSchema,
},
onSubmit: async ({ value }) => {
console.log(value);
},
});
return (
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
<form
onSubmit={(e) => {
e.preventDefault();
e.stopPropagation();
form.handleSubmit();
}}
>
<form.AppField
name="newField"
children={(field) => (
<field.TextField label="some textfield" />
)}
/>
<AddressForm form={form}></AddressForm>
<form.AppForm>
<form.SubmitButton>Senden</form.SubmitButton>
</form.AppForm>
</form>
</main>
</div>
);
}However I cannot get the form to work as expected. The Fields render correctly but when I fill in the inputs, the SubmitButton does not think the input is valid (SubmitButton is the same as in docs).
export const AddressForm = withForm({
defaultValues: {} as Address,
render: function Render({ form }) {/*formfields*/}export const AddressForm = withForm({
defaultValues: {} as Address,
render: function Render({ form }) {/*formfields*/}
