Shared field between 2 forms
Hey everyone, anyone was able to share a field between 2 forms? I came up with this code, I I couldn't get the types to work yet.
anyone has a better version?
update: I think I get it, anyone has a better version?
import { Button, Field, Icon, dataAttr } from '@mando/design-system'
import { type FormApi, Field as FormField } from '@tanstack/react-form'
import type { zodValidator } from '@tanstack/zod-form-adapter'
import type { FC } from 'react'
import { z } from 'zod'
export function EmailField<
// biome-ignore lint/suspicious/noExplicitAny: <explanation>
T extends FormApi<any, any> = FormApi<
{ email: string },
ReturnType<typeof zodValidator>
>,
>({ form }: { form: T }) {
return (
<FormField
name='email'
form={form}
validators={{
onSubmit: z.string().email('Invalid email address'),
}}
>
{(field) => (
<Field.Root invalid={Boolean(field.state.meta.errors.length)}>
<Field.Label>Your Email</Field.Label>
<Field.Control>
<Field.Input
name={field.name}
value={field.state.value}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
type='email'
placeholder='me@example.com'
/>
</Field.Control>
<Field.ErrorText>{field.state.meta.errors}</Field.ErrorText>
</Field.Root>
)}
</FormField>
)
}
import { Button, Field, Icon, dataAttr } from '@mando/design-system'
import { type FormApi, Field as FormField } from '@tanstack/react-form'
import type { zodValidator } from '@tanstack/zod-form-adapter'
import type { FC } from 'react'
import { z } from 'zod'
export function EmailField<
// biome-ignore lint/suspicious/noExplicitAny: <explanation>
T extends FormApi<any, any> = FormApi<
{ email: string },
ReturnType<typeof zodValidator>
>,
>({ form }: { form: T }) {
return (
<FormField
name='email'
form={form}
validators={{
onSubmit: z.string().email('Invalid email address'),
}}
>
{(field) => (
<Field.Root invalid={Boolean(field.state.meta.errors.length)}>
<Field.Label>Your Email</Field.Label>
<Field.Control>
<Field.Input
name={field.name}
value={field.state.value}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
type='email'
placeholder='me@example.com'
/>
</Field.Control>
<Field.ErrorText>{field.state.meta.errors}</Field.ErrorText>
</Field.Root>
)}
</FormField>
)
}
0 Replies