Hi I'm using latest version of tanstack/form
i want to pass the form as prop to the presentation component
but i'm finding issue with the types can you help
import React from 'react';
import { useForm } from '@tanstack/react-form';
import { z } from 'zod';
import LoginForm from '../../../components/Forms/Login';
export const loginSchema = z.object({
email: z.string().email('Invalid email'),
password: z.string().min(6, 'Password must be at least 6 characters'),
});
export type LoginValues = z.infer<typeof loginSchema>;
const LoginContainer: React.FC = () => {
const form = useForm({
defaultValues: {
email: '',
password: '',
},
onSubmit: async ({ value }: { value: LoginValues }) => {
console.log('Form submitted:', value);
},
validators: {
onSubmit: loginSchema,
},
});
console.log('Form state:', typeof form);
return <LoginForm form={form as any} />;
};
export default LoginContainer;
import React from 'react';
import { useForm } from '@tanstack/react-form';
import { z } from 'zod';
import LoginForm from '../../../components/Forms/Login';
export const loginSchema = z.object({
email: z.string().email('Invalid email'),
password: z.string().min(6, 'Password must be at least 6 characters'),
});
export type LoginValues = z.infer<typeof loginSchema>;
const LoginContainer: React.FC = () => {
const form = useForm({
defaultValues: {
email: '',
password: '',
},
onSubmit: async ({ value }: { value: LoginValues }) => {
console.log('Form submitted:', value);
},
validators: {
onSubmit: loginSchema,
},
});
console.log('Form state:', typeof form);
return <LoginForm form={form as any} />;
};
export default LoginContainer;
2 Replies
continuing-cyanOP•4mo ago
import React from 'react';
import { FieldApi } from '@tanstack/react-form';
import { z } from 'zod';
import { StrictFormApi } from '../../../types/formTypes';
// 1. Define Zod schema
export const loginSchema = z.object({
email: z.string().email(),
password: z.string().min(6),
});
// 2. Infer form values from schema
export type LoginValues = z.infer<typeof loginSchema>;
// 3. Define props
interface LoginFormProps {
form: StrictFormApi<LoginValues>;
}
// 4. Component
const LoginForm: React.FC<LoginFormProps> = ({ form }) => {
//@ts-ignore
const Field = form.Field; // ✅ Fix here
return (
<form
onSubmit={(e) => {
e.preventDefault();
form.handleSubmit();
}}
>
<Field name='email'>
{/* @ts-ignore */}
{(field: FieldApi<LoginValues, string>) => (
<div>
<label>Email</label>
<input
type='email'
value={field.state.value}
onChange={(e) => field.handleChange(e.target.value)}
/>
{field.state.meta.touchedErrors && <p>{field.state.meta.touchedErrors}</p>}
</div>
)}
</Field>
<Field name='password'>
{/* @ts-ignore */}
{(field: FieldApi<LoginValues, string>) => (
<div>
<label>Password</label>
<input
type='password'
value={field.state.value}
onChange={(e) => field.handleChange(e.target.value)}
/>
{field.state.meta.touchedErrors && <p>{field.state.meta.touchedErrors}</p>}
</div>
)}
</Field>
<button type='submit' disabled={form.state.isSubmitting}>
Login
</button>
</form>
);
};
export default LoginForm;
import React from 'react';
import { FieldApi } from '@tanstack/react-form';
import { z } from 'zod';
import { StrictFormApi } from '../../../types/formTypes';
// 1. Define Zod schema
export const loginSchema = z.object({
email: z.string().email(),
password: z.string().min(6),
});
// 2. Infer form values from schema
export type LoginValues = z.infer<typeof loginSchema>;
// 3. Define props
interface LoginFormProps {
form: StrictFormApi<LoginValues>;
}
// 4. Component
const LoginForm: React.FC<LoginFormProps> = ({ form }) => {
//@ts-ignore
const Field = form.Field; // ✅ Fix here
return (
<form
onSubmit={(e) => {
e.preventDefault();
form.handleSubmit();
}}
>
<Field name='email'>
{/* @ts-ignore */}
{(field: FieldApi<LoginValues, string>) => (
<div>
<label>Email</label>
<input
type='email'
value={field.state.value}
onChange={(e) => field.handleChange(e.target.value)}
/>
{field.state.meta.touchedErrors && <p>{field.state.meta.touchedErrors}</p>}
</div>
)}
</Field>
<Field name='password'>
{/* @ts-ignore */}
{(field: FieldApi<LoginValues, string>) => (
<div>
<label>Password</label>
<input
type='password'
value={field.state.value}
onChange={(e) => field.handleChange(e.target.value)}
/>
{field.state.meta.touchedErrors && <p>{field.state.meta.touchedErrors}</p>}
</div>
)}
</Field>
<button type='submit' disabled={form.state.isSubmitting}>
Login
</button>
</form>
);
};
export default LoginForm;
rare-sapphire•4mo ago
check the form composition section of the docs
it explains how to make components using forms