TanStack / form

🤖 Powerful and type-safe form state management for the web. TS/JS, React Form, Solid Form, Lit Form and Vue Form.
https://tanstack.com/form
MIT License
3.67k stars 330 forks source link

type error when using yup object schema fields #863

Open brunoti opened 2 months ago

brunoti commented 2 months ago

Describe the bug

When adding validators to the useForm it still doesn't populate the field error. I found a PR for that exactly.

But I have a type error when using "Schema.fields.field" on the validation. I have to use "Schema.fields.field as AnySchema" for it to work.

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/modest-lamarr-8x5gtj?file=%2Fsrc%2FApp.tsx%3A15%2C7&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clyomvwy000072e6abfg6mo2n%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clyomvwy000032e6alifh9xkz%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clyomvwy000042e6aqq139zad%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clyomvwy000062e6ae553ojc5%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clyomvwy000032e6alifh9xkz%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clyomvwy000022e6ar4l37fxm%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252FApp.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A15%252C%2522startColumn%2522%253A7%252C%2522endLineNumber%2522%253A15%252C%2522endColumn%2522%253A7%257D%255D%257D%255D%252C%2522id%2522%253A%2522clyomvwy000032e6alifh9xkz%2522%252C%2522activeTabId%2522%253A%2522clyomvwy000022e6ar4l37fxm%2522%257D%252C%2522clyomvwy000062e6ae553ojc5%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clyomvwy000052e6a2abi9plc%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clyomvwy000062e6ae553ojc5%2522%252C%2522activeTabId%2522%253A%2522clyomvwy000052e6a2abi9plc%2522%257D%252C%2522clyomvwy000042e6aqq139zad%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clyomvwy000042e6aqq139zad%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Steps to reproduce

Just look at the editor

Expected behavior

It should work without using "as AnySchema".

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

TanStack Form adapter

react-form

TanStack Form version

0.26.4

TypeScript version

latest

Additional context

No response

crutchcorn commented 2 months ago

This is a TS bug for sure, but I dunno how to fix it. I don't know Yup's types well enough to know what's accepted or not. PRs welcome