value in form.Field validator is any

[shinobu-uwu]

Hello! I am new to tanstack form and while creating my first form i noticed that the property passed to the functions of the validators are of type any is this expected behavior, or is my code wrong? This should be completely type-safe, right? Here is the code I have

import { useForm } from '@tanstack/react-form';
import { createFileRoute, useNavigate } from '@tanstack/react-router';
import TextInput from '~/components/form/text-input';

export const Route = createFileRoute('/')({
    component: Index,
});

function Index() {
    const navigate = useNavigate();
    const form = useForm({
        defaultValues: {
            username: '',
            password: '',
        },
        onSubmit: async ({ value }) => {
            if (await login(value.username, value.password)) {
                navigate({ to: '/products' });
            }
        },
    });

    return (
        <form
            onSubmit={(e) => {
                e.preventDefault();
                e.stopPropagation();
                form.handleSubmit();
            }}
        >
            <form.Field
                name="username"
                validators={{
                    onChange: ({ value }) => {
                        if (value.length < 5) {
                            return 'Username too short';
                        }
                    },
                }}
            >
                {(field) => (
                    <TextInput
                        label="Username"
                        type="text"
                        value={field.state.value}
                        onChange={(e) => field.handleChange(e.target.value)}
                        error={field.state.meta.errors.join(', ')}
                        required
                    />
                )}
            </form.Field>
            <form.Field
                name="password"
                validators={{
                    onChange: ({ value }) => {
                        if (value.length < 8) {
                            return 'Password too short';
                        }
                    },
                }}
            >
                {(field) => (
                    <TextInput
                        label="Password"
                        type="password"
                        value={field.state.value}
                        onChange={(e) => field.handleChange(e.target.value)}
                        error={field.state.meta.errors.join(', ')}
                        required
                    />
                )}
            </form.Field>
        </form>
    );
}

and as you can see, { value } is any, and if I change to not use destructuring the type still is any

[Balastrong]

That value should indeed have a proper type. Your code seems correct, maybe you're missing "strict": true in the tsconfig.json of your project?

[shinobu-uwu]

Yeah, that was it. I did have "strict": true in my tsconfig.json but it was not under compilerOptions 😅. That made the autocomplete recognize the correct type. Thanks a lot!