diff --git a/.github/workflows/autofix.yml b/.github/workflows/autofix.yml index 1a0433bd4..b8d9d920e 100644 --- a/.github/workflows/autofix.yml +++ b/.github/workflows/autofix.yml @@ -18,12 +18,14 @@ jobs: runs-on: ubuntu-latest steps: - name: Checkout - uses: actions/checkout@v4 + uses: actions/checkout@v4.2.1 - name: Setup Tools - uses: tanstack/config/.github/setup@1ce18c19ec31f6191db71f4b768b6b9ec3575a0e + uses: tanstack/config/.github/setup@main - name: Fix formatting run: pnpm prettier:write + - name: Generate Docs + run: pnpm docs:generate - name: Apply fixes uses: autofix-ci/action@ff86a557419858bb967097bfc916833f5647fa8c with: - commit-message: 'ci: apply automated fixes' + commit-message: 'ci: apply automated fixes and generate docs' diff --git a/docs/config.json b/docs/config.json index 692535ac4..b53c0e8cf 100644 --- a/docs/config.json +++ b/docs/config.json @@ -220,11 +220,26 @@ { "label": "API Reference", "children": [ - { "label": "JavaScript Reference", "to": "reference/index" }, - { "label": "Classes / FieldApi", "to": "reference/classes/fieldapi" }, - { "label": "Classes / FormApi", "to": "reference/classes/formapi" }, - { "label": "Functions / formOptions", "to": "reference/functions/formoptions" }, - { "label": "Functions / mergeForm", "to": "reference/functions/mergeform" }, + { + "label": "JavaScript Reference", + "to": "reference/index" + }, + { + "label": "Classes / FieldApi", + "to": "reference/classes/fieldapi" + }, + { + "label": "Classes / FormApi", + "to": "reference/classes/formapi" + }, + { + "label": "Functions / formOptions", + "to": "reference/functions/formoptions" + }, + { + "label": "Functions / mergeForm", + "to": "reference/functions/mergeform" + }, { "label": "Interfaces / FieldApiOptions", "to": "reference/interfaces/fieldapioptions" @@ -237,24 +252,54 @@ "label": "Interfaces / FieldValidators", "to": "reference/interfaces/fieldvalidators" }, - { "label": "Interfaces / FormOptions", "to": "reference/interfaces/formoptions" }, + { + "label": "Interfaces / FormOptions", + "to": "reference/interfaces/formoptions" + }, { "label": "Interfaces / FormValidators", "to": "reference/interfaces/formvalidators" }, - { "label": "Types / DeepKeys", "to": "reference/type-aliases/deepkeys" }, - { "label": "Types / DeepValue", "to": "reference/type-aliases/deepvalue" }, - { "label": "Types / FieldInfo", "to": "reference/type-aliases/fieldinfo" }, - { "label": "Types / FieldMeta", "to": "reference/type-aliases/fieldmeta" }, - { "label": "Types / FieldState", "to": "reference/type-aliases/fieldstate" }, - { "label": "Types / FormState", "to": "reference/type-aliases/formstate" }, - { "label": "Types / Updater", "to": "reference/type-aliases/updater" }, - { "label": "Types / UpdaterFn", "to": "reference/type-aliases/updaterfn" }, + { + "label": "Types / DeepKeys", + "to": "reference/type-aliases/deepkeys" + }, + { + "label": "Types / DeepValue", + "to": "reference/type-aliases/deepvalue" + }, + { + "label": "Types / FieldInfo", + "to": "reference/type-aliases/fieldinfo" + }, + { + "label": "Types / FieldMeta", + "to": "reference/type-aliases/fieldmeta" + }, + { + "label": "Types / FieldState", + "to": "reference/type-aliases/fieldstate" + }, + { + "label": "Types / FormState", + "to": "reference/type-aliases/formstate" + }, + { + "label": "Types / Updater", + "to": "reference/type-aliases/updater" + }, + { + "label": "Types / UpdaterFn", + "to": "reference/type-aliases/updaterfn" + }, { "label": "Types / ValidationError", "to": "reference/type-aliases/validationerror" }, - { "label": "Types / ValidationMeta", "to": "reference/type-aliases/validationmeta" } + { + "label": "Types / ValidationMeta", + "to": "reference/type-aliases/validationmeta" + } ], "frameworks": [ { @@ -297,7 +342,10 @@ { "label": "vue", "children": [ - { "label": "Vue Reference", "to": "framework/vue/reference/index" }, + { + "label": "Vue Reference", + "to": "framework/vue/reference/index" + }, { "label": "Functions / Field", "to": "framework/vue/reference/functions/field" @@ -352,7 +400,10 @@ { "label": "lit", "children": [ - { "label": "Lit Reference", "to": "framework/lit/reference/index" }, + { + "label": "Lit Reference", + "to": "framework/lit/reference/index" + }, { "label": "Classes / TanStackFormController", "to": "framework/lit/reference/tanstackformcontroller" @@ -424,6 +475,10 @@ { "label": "UI Libraries", "to": "framework/react/examples/ui-libraries" + }, + { + "label": "Field Errors From Form Validators", + "to": "framework/react/examples/field-errors-from-form-validators" } ] }, diff --git a/docs/framework/angular/guides/validation.md b/docs/framework/angular/guides/validation.md index b50560561..d5b2f44b2 100644 --- a/docs/framework/angular/guides/validation.md +++ b/docs/framework/angular/guides/validation.md @@ -469,6 +469,38 @@ export class AppComponent { } ``` +### Form Level Adapter Validation + +You can also use the adapter at the form level: + +```typescript +import { zodValidator } from '@tanstack/zod-form-adapter' +import { z } from 'zod' + +// ... + +const form = injectForm({ + validatorAdapter: zodValidator(), + validators: { + onChange: z.object({ + age: z.number().gte(13, 'You must be 13 to make an account'), + }), + }, +}) +``` + +If you use the adapter at the form level, it will pass the validation to the fields of the same name. + +This means that: + +```html + + + +``` + +Will still display the error message from the form-level validation. + ## Preventing invalid forms from being submitted The `onChange`, `onBlur` etc... callbacks are also run when the form is submitted and the submission is blocked if the form is invalid. diff --git a/docs/framework/angular/reference/classes/tanstackfield.md b/docs/framework/angular/reference/classes/tanstackfield.md index 2a8aa2149..fa74dc32a 100644 --- a/docs/framework/angular/reference/classes/tanstackfield.md +++ b/docs/framework/angular/reference/classes/tanstackfield.md @@ -46,7 +46,7 @@ api: FieldApi; #### Defined in -[tanstack-field.directive.ts:61](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/angular-form/src/tanstack-field.directive.ts#L61) +[tanstack-field.directive.ts:58](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L58) *** @@ -64,7 +64,7 @@ If `true`, always run async validation, even if there are errors emitted during #### Defined in -[tanstack-field.directive.ts:50](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/angular-form/src/tanstack-field.directive.ts#L50) +[tanstack-field.directive.ts:47](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L47) *** @@ -82,7 +82,7 @@ The default time to debounce async validation if there is not a more specific de #### Defined in -[tanstack-field.directive.ts:49](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/angular-form/src/tanstack-field.directive.ts#L49) +[tanstack-field.directive.ts:46](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L46) *** @@ -100,7 +100,7 @@ An optional object with default metadata for the field. #### Defined in -[tanstack-field.directive.ts:59](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/angular-form/src/tanstack-field.directive.ts#L59) +[tanstack-field.directive.ts:56](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L56) *** @@ -118,7 +118,7 @@ An optional default value for the field. #### Defined in -[tanstack-field.directive.ts:48](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/angular-form/src/tanstack-field.directive.ts#L48) +[tanstack-field.directive.ts:45](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L45) *** @@ -136,7 +136,7 @@ The field name. The type will be `DeepKeys` to ensure your name is #### Defined in -[tanstack-field.directive.ts:44](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/angular-form/src/tanstack-field.directive.ts#L44) +[tanstack-field.directive.ts:41](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L41) *** @@ -148,7 +148,7 @@ tanstackField: FormApi; #### Defined in -[tanstack-field.directive.ts:52](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/angular-form/src/tanstack-field.directive.ts#L52) +[tanstack-field.directive.ts:49](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L49) *** @@ -164,7 +164,7 @@ optional unmount: () => void; #### Defined in -[tanstack-field.directive.ts:76](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/angular-form/src/tanstack-field.directive.ts#L76) +[tanstack-field.directive.ts:73](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L73) *** @@ -182,7 +182,7 @@ A validator provided by an extension, like `yupValidator` from `@tanstack/yup-fo #### Defined in -[tanstack-field.directive.ts:51](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/angular-form/src/tanstack-field.directive.ts#L51) +[tanstack-field.directive.ts:48](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L48) *** @@ -200,7 +200,7 @@ A list of validators to pass to the field #### Defined in -[tanstack-field.directive.ts:56](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/angular-form/src/tanstack-field.directive.ts#L56) +[tanstack-field.directive.ts:53](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L53) ## Methods @@ -225,7 +225,7 @@ children are checked. #### Defined in -[tanstack-field.directive.ts:88](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/angular-form/src/tanstack-field.directive.ts#L88) +[tanstack-field.directive.ts:85](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L85) *** @@ -248,7 +248,7 @@ before a directive, pipe, or service instance is destroyed. #### Defined in -[tanstack-field.directive.ts:84](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/angular-form/src/tanstack-field.directive.ts#L84) +[tanstack-field.directive.ts:81](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L81) *** @@ -274,4 +274,4 @@ It is invoked only once when the directive is instantiated. #### Defined in -[tanstack-field.directive.ts:78](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/angular-form/src/tanstack-field.directive.ts#L78) +[tanstack-field.directive.ts:75](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L75) diff --git a/docs/framework/angular/reference/functions/injectform.md b/docs/framework/angular/reference/functions/injectform.md index 6b714cdf6..3ead8f1ca 100644 --- a/docs/framework/angular/reference/functions/injectform.md +++ b/docs/framework/angular/reference/functions/injectform.md @@ -25,4 +25,4 @@ function injectForm(opts?): FormApi(form, selector?): Sig ## Defined in -[inject-store.ts:4](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/angular-form/src/inject-store.ts#L4) +[inject-store.ts:4](https://github.com/TanStack/form/blob/main/packages/angular-form/src/inject-store.ts#L4) diff --git a/docs/framework/lit/reference/classes/tanstackformcontroller.md b/docs/framework/lit/reference/classes/tanstackformcontroller.md index 817d8d938..95e7e5ad1 100644 --- a/docs/framework/lit/reference/classes/tanstackformcontroller.md +++ b/docs/framework/lit/reference/classes/tanstackformcontroller.md @@ -35,7 +35,7 @@ new TanStackFormController(host, config?): TanStack #### Defined in -[tanstack-form-controller.ts:93](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/lit-form/src/tanstack-form-controller.ts#L93) +[tanstack-form-controller.ts:93](https://github.com/TanStack/form/blob/main/packages/lit-form/src/tanstack-form-controller.ts#L93) ## Properties @@ -47,7 +47,7 @@ api: FormApi; #### Defined in -[tanstack-form-controller.ts:91](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/lit-form/src/tanstack-form-controller.ts#L91) +[tanstack-form-controller.ts:91](https://github.com/TanStack/form/blob/main/packages/lit-form/src/tanstack-form-controller.ts#L91) ## Methods @@ -101,7 +101,7 @@ render: renderCallback ( <> Age: - + { field.state.meta.errors ? {field.state.meta.errors.join(', ')} diff --git a/docs/framework/react/guides/validation.md b/docs/framework/react/guides/validation.md index 8f5381c24..21a6d4424 100644 --- a/docs/framework/react/guides/validation.md +++ b/docs/framework/react/guides/validation.md @@ -194,6 +194,109 @@ export default function App() { } ``` +### Setting field-level errors from the form's validators + +You can set errors on the fields from the form's validators. One common use case for this is validating all the fields on submit by calling a single API endpoint in the form's `onSubmitAsync` validator. + +```tsx +export default function App() { + const form = useForm({ + defaultValues: { + age: 0, + }, + validators: { + onSubmitAsync: async ({ value }) => { + // Verify the age on the server + const isOlderThan13 = await verifyAgeOnServer(value.age) + if (!isOlderThan13) { + return { + form: 'Invalid data', // The `form` key is optional + fields: { + age: 'Must be 13 or older to sign', + }, + } + } + + return null + }, + }, + }) + + return ( +
+
{ + e.preventDefault() + e.stopPropagation() + void form.handleSubmit() + }} + > + + {(field) => ( + <> + + field.handleChange(e.target.valueAsNumber)} + /> + {field.state.meta.errors ? ( + {field.state.meta.errors.join(', ')} + ) : null} + + )} + + [state.errorMap]} + children={([errorMap]) => + errorMap.onSubmit ? ( +
+ There was an error on the form: {errorMap.onSubmit} +
+ ) : null + } + /> + {/*...*/} + +
+ ) +} +``` + +> Something worth mentioning is that if you have a form validation function that returns an error, that error may be overwritten by the field-specific validation. +> +> This means that: +> +> ```jsx +> const form = useForm({ +> defaultValues: { +> age: 0, +> }, +> validators: { +> onChange: ({ value }) => { +> return { +> fields: { +> age: value.age < 12 ? 'Too young!' : undefined, +> }, +> } +> }, +> }, +> }) +> +> // ... +> +> return name="age" +> validators={{ +> onChange: ({ value }) => value % 2 === 0 ? 'Must be odd!' : undefined, +> }} +> /> +> ``` +> +> Will only show `'Must be odd!` even if the 'Too young!' error is returned by the form-level validation. + ## Asynchronous Functional Validation While we suspect most validations will be synchronous, there are many instances where a network call or some other async operation would be useful to validate against. @@ -374,6 +477,44 @@ These adapters also support async operations using the proper property names: /> ``` +### Form Level Adapter Validation + +You can also use the adapter at the form level: + +```tsx +import { zodValidator } from '@tanstack/zod-form-adapter' +import { z } from 'zod' + +// ... + +const formSchema = z.object({ + age: z.number().gte(13, 'You must be 13 to make an account'), +}) + +const form = useForm({ + validatorAdapter: zodValidator(), + validators: { + onChange: formSchema + }, +}) +``` + +If you use the adapter at the form level, it will pass the validation to the fields of the same name. + +This means that: + +```tsx + + { + return <>{/* ... */} + }} +/> +``` + +Will still display the error message from the form-level validation. + ## Preventing invalid forms from being submitted The `onChange`, `onBlur` etc... callbacks are also run when the form is submitted and the submission is blocked if the form is invalid. diff --git a/docs/framework/react/reference/functions/field.md b/docs/framework/react/reference/functions/field.md index 6c3424ec1..fddb0a969 100644 --- a/docs/framework/react/reference/functions/field.md +++ b/docs/framework/react/reference/functions/field.md @@ -35,4 +35,4 @@ The `Field` component uses the `useField` hook internally to manage the field in ## Defined in -[useField.tsx:163](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/react-form/src/useField.tsx#L163) +[useField.tsx:164](https://github.com/TanStack/form/blob/main/packages/react-form/src/useField.tsx#L164) diff --git a/docs/framework/react/reference/functions/usefield.md b/docs/framework/react/reference/functions/usefield.md index 849a51c9b..0d341f855 100644 --- a/docs/framework/react/reference/functions/usefield.md +++ b/docs/framework/react/reference/functions/usefield.md @@ -37,4 +37,4 @@ The `FieldApi` instance for the specified field. ## Defined in -[useField.tsx:49](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/react-form/src/useField.tsx#L49) +[useField.tsx:50](https://github.com/TanStack/form/blob/main/packages/react-form/src/useField.tsx#L50) diff --git a/docs/framework/react/reference/functions/useform.md b/docs/framework/react/reference/functions/useform.md index 0c758e80b..f0a52bf6e 100644 --- a/docs/framework/react/reference/functions/useform.md +++ b/docs/framework/react/reference/functions/useform.md @@ -25,8 +25,8 @@ This API encapsulates all the necessary functionalities related to the form. It ## Returns -`FormApi`\<`TFormData`, `TFormValidator`\> & `ReactFormApi`\<`TFormData`, `TFormValidator`\> +`FormApi`\<`TFormData`, `TFormValidator`\> & [`ReactFormApi`](../interfaces/reactformapi.md)\<`TFormData`, `TFormValidator`\> ## Defined in -[useForm.tsx:56](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/react-form/src/useForm.tsx#L56) +[useForm.tsx:57](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L57) diff --git a/docs/framework/react/reference/functions/usetransform.md b/docs/framework/react/reference/functions/usetransform.md index de885f556..647b76fac 100644 --- a/docs/framework/react/reference/functions/usetransform.md +++ b/docs/framework/react/reference/functions/usetransform.md @@ -6,7 +6,7 @@ title: useTransform # Function: useTransform() ```ts -function useTransform(fn, deps): object +function useTransform(fn, deps): FormTransform ``` ## Type Parameters @@ -23,28 +23,8 @@ function useTransform(fn, deps): object ## Returns -`object` - -### deps - -```ts -deps: unknown[]; -``` - -### fn() - -```ts -fn: (formBase) => FormApi; -``` - -#### Parameters - -• **formBase**: `FormApi`\<`any`, `any`\> - -#### Returns - -`FormApi`\<`TFormData`, `TFormValidator`\> +`FormTransform`\<`TFormData`, `TFormValidator`\> ## Defined in -[useTransform.ts:3](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/react-form/src/useTransform.ts#L3) +[useTransform.ts:3](https://github.com/TanStack/form/blob/main/packages/react-form/src/useTransform.ts#L3) diff --git a/docs/framework/react/reference/index.md b/docs/framework/react/reference/index.md index 5c67153e1..9476d97f2 100644 --- a/docs/framework/react/reference/index.md +++ b/docs/framework/react/reference/index.md @@ -5,6 +5,10 @@ title: "@tanstack/react-form" # @tanstack/react-form +## Interfaces + +- [ReactFormApi](interfaces/reactformapi.md) + ## Type Aliases - [FieldComponent](type-aliases/fieldcomponent.md) diff --git a/docs/framework/react/reference/interfaces/reactformapi.md b/docs/framework/react/reference/interfaces/reactformapi.md new file mode 100644 index 000000000..fd198be67 --- /dev/null +++ b/docs/framework/react/reference/interfaces/reactformapi.md @@ -0,0 +1,110 @@ +--- +id: ReactFormApi +title: ReactFormApi +--- + +# Interface: ReactFormApi\ + +Fields that are added onto the `FormAPI` from `@tanstack/form-core` and returned from `useForm` + +## Type Parameters + +• **TFormData** + +• **TFormValidator** *extends* `Validator`\<`TFormData`, `unknown`\> \| `undefined` = `undefined` + +## Properties + +### Field + +```ts +Field: FieldComponent; +``` + +A React component to render form fields. With this, you can render and manage individual form fields. + +#### Defined in + +[useForm.tsx:21](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L21) + +*** + +### Subscribe() + +```ts +Subscribe: (props) => ReactNode; +``` + +A `Subscribe` function that allows you to listen and react to changes in the form's state. It's especially useful when you need to execute side effects or render specific components in response to state updates. + +#### Type Parameters + +• **TSelected** = `FormState`\<`TFormData`\> + +#### Parameters + +• **props** + +• **props.children**: `ReactNode` \| (`state`) => `ReactNode` + +• **props.selector?** + +TypeScript versions <=5.0.4 have a bug that prevents +the type of the `TSelected` generic from being inferred +from the return type of this method. + +In these versions, `TSelected` will fall back to the default +type (or `unknown` if that's not defined). + +**See** + + - [This discussion on GitHub for the details](https://github.com/TanStack/form/pull/606/files#r1506715714) + - [The bug report in `microsoft/TypeScript`](https://github.com/microsoft/TypeScript/issues/52786) + +#### Returns + +`ReactNode` + +#### Defined in + +[useForm.tsx:35](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L35) + +*** + +### useField + +```ts +useField: UseField; +``` + +A custom React hook that provides functionalities related to individual form fields. It gives you access to field values, errors, and allows you to set or update field values. + +#### Defined in + +[useForm.tsx:25](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L25) + +*** + +### useStore() + +```ts +useStore: (selector?) => TSelected; +``` + +A `useStore` hook that connects to the internal store of the form. It can be used to access the form's current state or any other related state information. You can optionally pass in a selector function to cherry-pick specific parts of the state + +#### Type Parameters + +• **TSelected** = `FormState`\<`TFormData`\> + +#### Parameters + +• **selector?** + +#### Returns + +`TSelected` + +#### Defined in + +[useForm.tsx:29](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L29) diff --git a/docs/framework/react/reference/type-aliases/fieldcomponent.md b/docs/framework/react/reference/type-aliases/fieldcomponent.md index d76778e89..079e22883 100644 --- a/docs/framework/react/reference/type-aliases/fieldcomponent.md +++ b/docs/framework/react/reference/type-aliases/fieldcomponent.md @@ -41,4 +41,4 @@ A type alias representing a field component for a specific form data type. ## Defined in -[useField.tsx:133](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/react-form/src/useField.tsx#L133) +[useField.tsx:134](https://github.com/TanStack/form/blob/main/packages/react-form/src/useField.tsx#L134) diff --git a/docs/framework/react/reference/type-aliases/usefield.md b/docs/framework/react/reference/type-aliases/usefield.md index a4cf02e60..831214e47 100644 --- a/docs/framework/react/reference/type-aliases/usefield.md +++ b/docs/framework/react/reference/type-aliases/usefield.md @@ -37,4 +37,4 @@ A function that takes an optional object with a `name` property and field option ## Defined in -[useField.tsx:25](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/react-form/src/useField.tsx#L25) +[useField.tsx:26](https://github.com/TanStack/form/blob/main/packages/react-form/src/useField.tsx#L26) diff --git a/docs/framework/solid/guides/validation.md b/docs/framework/solid/guides/validation.md index 354b721bb..50ef40a7a 100644 --- a/docs/framework/solid/guides/validation.md +++ b/docs/framework/solid/guides/validation.md @@ -376,6 +376,44 @@ These adapters also support async operations using the proper property names: /> ``` +### Form Level Adapter Validation + + +You can also use the adapter at the form level: + +```tsx +import { zodValidator } from '@tanstack/zod-form-adapter' +import { z } from 'zod' + +// ... + +const form = createForm(() => ({ + validatorAdapter: zodValidator(), + validators: { + onChange: z.object({ + age: z.number().gte(13, 'You must be 13 to make an account'), + }), + }, +})) +``` + +If you use the adapter at the form level, it will pass the validation to the fields of the same name. + +This means that: + +```tsx + + { + return <>{/* ... */} + }} +/> +``` + +Will still display the error message from the form-level validation. + + ## Preventing invalid forms from being submitted The `onChange`, `onBlur` etc... callbacks are also run when the form is submitted and the submission is blocked if the form is invalid. diff --git a/docs/framework/solid/reference/functions/createfield.md b/docs/framework/solid/reference/functions/createfield.md index f1b7c58ce..d4cbbcf3b 100644 --- a/docs/framework/solid/reference/functions/createfield.md +++ b/docs/framework/solid/reference/functions/createfield.md @@ -35,4 +35,4 @@ function createField ## Defined in -[createField.tsx:87](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/solid-form/src/createField.tsx#L87) +[createField.tsx:87](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createField.tsx#L87) diff --git a/docs/framework/solid/reference/functions/createform.md b/docs/framework/solid/reference/functions/createform.md index 181f6a8a3..ee2fd0d57 100644 --- a/docs/framework/solid/reference/functions/createform.md +++ b/docs/framework/solid/reference/functions/createform.md @@ -21,8 +21,8 @@ function createForm(opts?): FormApi & `SolidFormApi`\<`TParentData`, `TFormValidator`\> +`FormApi`\<`TParentData`, `TFormValidator`\> & [`SolidFormApi`](../interfaces/solidformapi.md)\<`TParentData`, `TFormValidator`\> ## Defined in -[createForm.tsx:29](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/solid-form/src/createForm.tsx#L29) +[createForm.tsx:26](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createForm.tsx#L26) diff --git a/docs/framework/solid/reference/functions/field.md b/docs/framework/solid/reference/functions/field.md index c54493a0a..0afbbd175 100644 --- a/docs/framework/solid/reference/functions/field.md +++ b/docs/framework/solid/reference/functions/field.md @@ -31,4 +31,4 @@ function Field(props ## Defined in -[createField.tsx:185](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/solid-form/src/createField.tsx#L185) +[createField.tsx:185](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createField.tsx#L185) diff --git a/docs/framework/solid/reference/index.md b/docs/framework/solid/reference/index.md index 69b7ef88f..eafeb8042 100644 --- a/docs/framework/solid/reference/index.md +++ b/docs/framework/solid/reference/index.md @@ -5,6 +5,10 @@ title: "@tanstack/solid-form" # @tanstack/solid-form +## Interfaces + +- [SolidFormApi](interfaces/solidformapi.md) + ## Type Aliases - [CreateField](type-aliases/createfield.md) @@ -12,6 +16,6 @@ title: "@tanstack/solid-form" ## Functions -- [Field](functions/field.md) - [createField](functions/createfield.md) - [createForm](functions/createform.md) +- [Field](functions/field.md) diff --git a/docs/framework/solid/reference/interfaces/solidformapi.md b/docs/framework/solid/reference/interfaces/solidformapi.md new file mode 100644 index 000000000..ab0a76bdd --- /dev/null +++ b/docs/framework/solid/reference/interfaces/solidformapi.md @@ -0,0 +1,92 @@ +--- +id: SolidFormApi +title: SolidFormApi +--- + +# Interface: SolidFormApi\ + +## Type Parameters + +• **TFormData** + +• **TFormValidator** *extends* `Validator`\<`TFormData`, `unknown`\> \| `undefined` = `undefined` + +## Properties + +### createField + +```ts +createField: CreateField; +``` + +#### Defined in + +[createForm.tsx:16](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createForm.tsx#L16) + +*** + +### Field + +```ts +Field: FieldComponent; +``` + +#### Defined in + +[createForm.tsx:15](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createForm.tsx#L15) + +*** + +### Subscribe() + +```ts +Subscribe: (props) => Element; +``` + +#### Type Parameters + +• **TSelected** = `FormState`\<`TFormData`\> + +#### Parameters + +• **props** + +• **props.children**: `Element` \| (`state`) => `Element` + +• **props.selector?** + +#### Returns + +`Element` + +#### Defined in + +[createForm.tsx:20](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createForm.tsx#L20) + +*** + +### useStore() + +```ts +useStore: (selector?) => () => TSelected; +``` + +#### Type Parameters + +• **TSelected** = `FormState`\<`TFormData`\> + +#### Parameters + +• **selector?** + +#### Returns + +`Function` + +##### Returns + +`TSelected` + +#### Defined in + +[createForm.tsx:17](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createForm.tsx#L17) diff --git a/docs/framework/solid/reference/type-aliases/createfield.md b/docs/framework/solid/reference/type-aliases/createfield.md index 3edb2b360..321be9093 100644 --- a/docs/framework/solid/reference/type-aliases/createfield.md +++ b/docs/framework/solid/reference/type-aliases/createfield.md @@ -37,4 +37,4 @@ type CreateField: (o ## Defined in -[createField.tsx:29](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/solid-form/src/createField.tsx#L29) +[createField.tsx:29](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createField.tsx#L29) diff --git a/docs/framework/solid/reference/type-aliases/fieldcomponent.md b/docs/framework/solid/reference/type-aliases/fieldcomponent.md index c349bf0c7..bfa206357 100644 --- a/docs/framework/solid/reference/type-aliases/fieldcomponent.md +++ b/docs/framework/solid/reference/type-aliases/fieldcomponent.md @@ -39,4 +39,4 @@ type FieldComponent: - @@ -45,8 +45,8 @@ In the example above, the validation is done at each keystroke (`onChange`). If, ``` vue @@ -75,8 +75,8 @@ So you can control when the validation is done by implementing the desired callb ```vue @@ -110,8 +110,8 @@ Once you have your validation in place, you can map the errors from an array to ```vue