diff --git a/docs/framework/angular/guides/validation.md b/docs/framework/angular/guides/validation.md
index d9d72352a..4b73245d6 100644
--- a/docs/framework/angular/guides/validation.md
+++ b/docs/framework/angular/guides/validation.md
@@ -204,6 +204,42 @@ export class AppComponent {
}
```
+It's worth mentioning that our `errors` array and the `errorMap` matches the types returned by the validators. This means that:
+
+```angular-ts
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [TanStackField],
+ template: `
+
+
+
+
+ @if (!age.api.state.meta.errorMap['onChange']?.isOldEnough) {
+ The user is not old enough
+ }
+
+ `,
+})
+export class AppComponent {
+ ageValidator: FieldValidateFn = ({ value }) =>
+ value < 13 ? 'You must be 13 to make an account' : undefined
+
+ // ...
+}
+```
+
+
+
+
## Validation at field level vs at form level
As shown above, each `[tanstackField]` accepts its own validation rules via the `onChange`, `onBlur` etc... callbacks. It is also possible to define validation rules at the form level (as opposed to field by field) by passing similar callbacks to the `injectForm()` function.
diff --git a/docs/framework/angular/reference/classes/tanstackfield.md b/docs/framework/angular/reference/classes/tanstackfield.md
index 8d8f6dbaa..b3a84cdd8 100644
--- a/docs/framework/angular/reference/classes/tanstackfield.md
+++ b/docs/framework/angular/reference/classes/tanstackfield.md
@@ -3,7 +3,9 @@ id: TanStackField
title: TanStackField
---
-# Class: TanStackField\
+
+
+# Class: TanStackField\
Defined in: [tanstack-field.directive.ts:25](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L25)
@@ -21,34 +23,64 @@ Defined in: [tanstack-field.directive.ts:25](https://github.com/TanStack/form/bl
• **TData** *extends* `DeepValue`\<`TParentData`, `TName`\> = `DeepValue`\<`TParentData`, `TName`\>
+• **TOnMountReturn** = `undefined`
+
+• **TOnChangeReturn** = `undefined`
+
+• **TOnChangeAsyncReturn** = `undefined`
+
+• **TOnBlurReturn** = `undefined`
+
+• **TOnBlurAsyncReturn** = `undefined`
+
+• **TOnSubmitReturn** = `undefined`
+
+• **TOnSubmitAsyncReturn** = `undefined`
+
+• **TFormOnMountReturn** = `undefined`
+
+• **TFormOnChangeReturn** = `undefined`
+
+• **TFormOnChangeAsyncReturn** = `undefined`
+
+• **TFormOnBlurReturn** = `undefined`
+
+• **TFormOnBlurAsyncReturn** = `undefined`
+
+• **TFormOnSubmitReturn** = `undefined`
+
+• **TFormOnSubmitAsyncReturn** = `undefined`
+
+• **TFormOnServerReturn** = `undefined`
+
## Implements
- `OnInit`
- `OnChanges`
- `OnDestroy`
-- `FieldOptions`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\>
+- `FieldOptions`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`, `TOnMountReturn`, `TOnChangeReturn`, `TOnChangeAsyncReturn`, `TOnBlurReturn`, `TOnBlurAsyncReturn`, `TOnSubmitReturn`, `TOnSubmitAsyncReturn`\>
## Constructors
### new TanStackField()
```ts
-new TanStackField(): TanStackField
+new TanStackField(): TanStackField
```
#### Returns
-[`TanStackField`](tanstackfield.md)\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\>
+[`TanStackField`](tanstackfield.md)\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`, `TOnMountReturn`, `TOnChangeReturn`, `TOnChangeAsyncReturn`, `TOnBlurReturn`, `TOnBlurAsyncReturn`, `TOnSubmitReturn`, `TOnSubmitAsyncReturn`, `TFormOnMountReturn`, `TFormOnChangeReturn`, `TFormOnChangeAsyncReturn`, `TFormOnBlurReturn`, `TFormOnBlurAsyncReturn`, `TFormOnSubmitReturn`, `TFormOnSubmitAsyncReturn`, `TFormOnServerReturn`\>
## Properties
### api
```ts
-api: FieldApi;
+api: FieldApi;
```
-Defined in: [tanstack-field.directive.ts:62](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L62)
+Defined in: [tanstack-field.directive.ts:111](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L111)
***
@@ -58,7 +90,7 @@ Defined in: [tanstack-field.directive.ts:62](https://github.com/TanStack/form/bl
optional asyncAlways: boolean;
```
-Defined in: [tanstack-field.directive.ts:48](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L48)
+Defined in: [tanstack-field.directive.ts:76](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L76)
If `true`, always run async validation, even if there are errors emitted during synchronous validation.
@@ -76,7 +108,7 @@ FieldOptions.asyncAlways
optional asyncDebounceMs: number;
```
-Defined in: [tanstack-field.directive.ts:47](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L47)
+Defined in: [tanstack-field.directive.ts:75](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L75)
The default time to debounce async validation if there is not a more specific debounce time passed.
@@ -94,7 +126,7 @@ FieldOptions.asyncDebounceMs
optional defaultMeta: Partial;
```
-Defined in: [tanstack-field.directive.ts:60](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L60)
+Defined in: [tanstack-field.directive.ts:109](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L109)
An optional object with default metadata for the field.
@@ -112,7 +144,7 @@ FieldOptions.defaultMeta
optional defaultValue: NoInfer;
```
-Defined in: [tanstack-field.directive.ts:46](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L46)
+Defined in: [tanstack-field.directive.ts:74](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L74)
An optional default value for the field.
@@ -130,7 +162,7 @@ FieldOptions.defaultValue
optional listeners: NoInfer>;
```
-Defined in: [tanstack-field.directive.ts:57](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L57)
+Defined in: [tanstack-field.directive.ts:106](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L106)
A list of listeners which attach to the corresponding events
@@ -148,7 +180,7 @@ FieldOptions.listeners
name: TName;
```
-Defined in: [tanstack-field.directive.ts:42](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L42)
+Defined in: [tanstack-field.directive.ts:70](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L70)
The field name. The type will be `DeepKeys` to ensure your name is a deep key of the parent dataset.
@@ -163,10 +195,10 @@ FieldOptions.name
### tanstackField
```ts
-tanstackField: FormApi;
+tanstackField: FormApi;
```
-Defined in: [tanstack-field.directive.ts:50](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L50)
+Defined in: [tanstack-field.directive.ts:78](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L78)
***
@@ -176,7 +208,7 @@ Defined in: [tanstack-field.directive.ts:50](https://github.com/TanStack/form/bl
optional unmount: () => void;
```
-Defined in: [tanstack-field.directive.ts:78](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L78)
+Defined in: [tanstack-field.directive.ts:169](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L169)
#### Returns
@@ -190,7 +222,7 @@ Defined in: [tanstack-field.directive.ts:78](https://github.com/TanStack/form/bl
optional validatorAdapter: TFieldValidator;
```
-Defined in: [tanstack-field.directive.ts:49](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L49)
+Defined in: [tanstack-field.directive.ts:77](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L77)
A validator provided by an extension, like `yupValidator` from `@tanstack/yup-form-adapter`
@@ -205,10 +237,10 @@ FieldOptions.validatorAdapter
### validators?
```ts
-optional validators: NoInfer>;
+optional validators: NoInfer>;
```
-Defined in: [tanstack-field.directive.ts:54](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L54)
+Defined in: [tanstack-field.directive.ts:90](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L90)
A list of validators to pass to the field
@@ -226,7 +258,7 @@ FieldOptions.validators
ngOnChanges(): void
```
-Defined in: [tanstack-field.directive.ts:90](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L90)
+Defined in: [tanstack-field.directive.ts:181](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L181)
A callback method that is invoked immediately after the
default change detector has checked data-bound properties
@@ -251,7 +283,7 @@ OnChanges.ngOnChanges
ngOnDestroy(): void
```
-Defined in: [tanstack-field.directive.ts:86](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L86)
+Defined in: [tanstack-field.directive.ts:177](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L177)
A callback method that performs custom clean-up, invoked immediately
before a directive, pipe, or service instance is destroyed.
@@ -274,7 +306,7 @@ OnDestroy.ngOnDestroy
ngOnInit(): void
```
-Defined in: [tanstack-field.directive.ts:80](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L80)
+Defined in: [tanstack-field.directive.ts:171](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L171)
A callback method that is invoked immediately after the
default change detector has checked the directive's
diff --git a/docs/framework/angular/reference/functions/injectform.md b/docs/framework/angular/reference/functions/injectform.md
index 05b89cd61..265548a1e 100644
--- a/docs/framework/angular/reference/functions/injectform.md
+++ b/docs/framework/angular/reference/functions/injectform.md
@@ -3,10 +3,12 @@ id: injectForm
title: injectForm
---
+
+
# Function: injectForm()
```ts
-function injectForm(opts?): FormApi
+function injectForm(opts?): FormApi
```
Defined in: [inject-form.ts:5](https://github.com/TanStack/form/blob/main/packages/angular-form/src/inject-form.ts#L5)
@@ -17,12 +19,28 @@ Defined in: [inject-form.ts:5](https://github.com/TanStack/form/blob/main/packag
• **TFormValidator** *extends* `undefined` \| `Validator`\<`TFormData`, `unknown`\> = `undefined`
+• **TOnMountReturn** = `undefined`
+
+• **TOnChangeReturn** = `undefined`
+
+• **TOnChangeAsyncReturn** = `undefined`
+
+• **TOnBlurReturn** = `undefined`
+
+• **TOnBlurAsyncReturn** = `undefined`
+
+• **TOnSubmitReturn** = `undefined`
+
+• **TOnSubmitAsyncReturn** = `undefined`
+
+• **TOnServerReturn** = `undefined`
+
## Parameters
### opts?
-`FormOptions`\<`TFormData`, `TFormValidator`\>
+`FormOptions`\<`TFormData`, `TFormValidator`, `TOnMountReturn`, `TOnChangeReturn`, `TOnChangeAsyncReturn`, `TOnBlurReturn`, `TOnBlurAsyncReturn`, `TOnSubmitReturn`, `TOnSubmitAsyncReturn`, `TOnServerReturn`\>
## Returns
-`FormApi`\<`TFormData`, `TFormValidator`\>
+`FormApi`\<`TFormData`, `TFormValidator`, `TOnMountReturn`, `TOnChangeReturn`, `TOnChangeAsyncReturn`, `TOnBlurReturn`, `TOnBlurAsyncReturn`, `TOnSubmitReturn`, `TOnSubmitAsyncReturn`, `TOnServerReturn`\>
diff --git a/docs/framework/angular/reference/functions/injectstore.md b/docs/framework/angular/reference/functions/injectstore.md
index d66d6302a..98d4c51b8 100644
--- a/docs/framework/angular/reference/functions/injectstore.md
+++ b/docs/framework/angular/reference/functions/injectstore.md
@@ -3,10 +3,12 @@ id: injectStore
title: injectStore
---
+
+
# Function: injectStore()
```ts
-function injectStore(form, selector?): Signal
+function injectStore(form, selector?): Signal
```
Defined in: [inject-store.ts:4](https://github.com/TanStack/form/blob/main/packages/angular-form/src/inject-store.ts#L4)
@@ -17,13 +19,29 @@ Defined in: [inject-store.ts:4](https://github.com/TanStack/form/blob/main/packa
• **TFormValidator** *extends* `undefined` \| `Validator`\<`TFormData`, `unknown`\> = `undefined`
+• **TOnMountReturn** = `undefined`
+
+• **TOnChangeReturn** = `undefined`
+
+• **TOnChangeAsyncReturn** = `undefined`
+
+• **TOnBlurReturn** = `undefined`
+
+• **TOnBlurAsyncReturn** = `undefined`
+
+• **TOnSubmitReturn** = `undefined`
+
+• **TOnSubmitAsyncReturn** = `undefined`
+
+• **TOnServerReturn** = `undefined`
+
• **TSelected** = `NoInfer`\<`FormState`\<`TFormData`\>\>
## Parameters
### form
-`FormApi`\<`TFormData`, `TFormValidator`\>
+`FormApi`\<`TFormData`, `TFormValidator`, `TOnMountReturn`, `TOnChangeReturn`, `TOnChangeAsyncReturn`, `TOnBlurReturn`, `TOnBlurAsyncReturn`, `TOnSubmitReturn`, `TOnSubmitAsyncReturn`, `TOnServerReturn`\>
### selector?
diff --git a/docs/framework/angular/reference/index.md b/docs/framework/angular/reference/index.md
index aab1d7b1d..3110ff697 100644
--- a/docs/framework/angular/reference/index.md
+++ b/docs/framework/angular/reference/index.md
@@ -3,6 +3,8 @@ id: "@tanstack/angular-form"
title: "@tanstack/angular-form"
---
+
+
# @tanstack/angular-form
## Classes
diff --git a/docs/framework/lit/reference/classes/tanstackformcontroller.md b/docs/framework/lit/reference/classes/tanstackformcontroller.md
index b5be60c77..08e568bec 100644
--- a/docs/framework/lit/reference/classes/tanstackformcontroller.md
+++ b/docs/framework/lit/reference/classes/tanstackformcontroller.md
@@ -3,9 +3,11 @@ id: TanStackFormController
title: TanStackFormController
---
-# Class: TanStackFormController\
+
-Defined in: [tanstack-form-controller.ts:81](https://github.com/TanStack/form/blob/main/packages/lit-form/src/tanstack-form-controller.ts#L81)
+# Class: TanStackFormController\
+
+Defined in: [tanstack-form-controller.ts:181](https://github.com/TanStack/form/blob/main/packages/lit-form/src/tanstack-form-controller.ts#L181)
## Type Parameters
@@ -13,6 +15,22 @@ Defined in: [tanstack-form-controller.ts:81](https://github.com/TanStack/form/bl
• **TFormValidator** *extends* `Validator`\<`TParentData`, `unknown`\> \| `undefined` = `undefined`
+• **TFormOnMountReturn** = `undefined`
+
+• **TFormOnChangeReturn** = `undefined`
+
+• **TFormOnChangeAsyncReturn** = `undefined`
+
+• **TFormOnBlurReturn** = `undefined`
+
+• **TFormOnBlurAsyncReturn** = `undefined`
+
+• **TFormOnSubmitReturn** = `undefined`
+
+• **TFormOnSubmitAsyncReturn** = `undefined`
+
+• **TFormOnServerReturn** = `undefined`
+
## Implements
- `ReactiveController`
@@ -22,10 +40,10 @@ Defined in: [tanstack-form-controller.ts:81](https://github.com/TanStack/form/bl
### new TanStackFormController()
```ts
-new TanStackFormController(host, config?): TanStackFormController
+new TanStackFormController(host, config?): TanStackFormController
```
-Defined in: [tanstack-form-controller.ts:93](https://github.com/TanStack/form/blob/main/packages/lit-form/src/tanstack-form-controller.ts#L93)
+Defined in: [tanstack-form-controller.ts:212](https://github.com/TanStack/form/blob/main/packages/lit-form/src/tanstack-form-controller.ts#L212)
#### Parameters
@@ -35,31 +53,31 @@ Defined in: [tanstack-form-controller.ts:93](https://github.com/TanStack/form/bl
##### config?
-`FormOptions`\<`TParentData`, `TFormValidator`\>
+`FormOptions`\<`TParentData`, `TFormValidator`, `TFormOnMountReturn`, `TFormOnChangeReturn`, `TFormOnChangeAsyncReturn`, `TFormOnBlurReturn`, `TFormOnBlurAsyncReturn`, `TFormOnSubmitReturn`, `TFormOnSubmitAsyncReturn`, `TFormOnServerReturn`\>
#### Returns
-[`TanStackFormController`](tanstackformcontroller.md)\<`TParentData`, `TFormValidator`\>
+[`TanStackFormController`](tanstackformcontroller.md)\<`TParentData`, `TFormValidator`, `TFormOnMountReturn`, `TFormOnChangeReturn`, `TFormOnChangeAsyncReturn`, `TFormOnBlurReturn`, `TFormOnBlurAsyncReturn`, `TFormOnSubmitReturn`, `TFormOnSubmitAsyncReturn`, `TFormOnServerReturn`\>
## Properties
### api
```ts
-api: FormApi;
+api: FormApi;
```
-Defined in: [tanstack-form-controller.ts:91](https://github.com/TanStack/form/blob/main/packages/lit-form/src/tanstack-form-controller.ts#L91)
+Defined in: [tanstack-form-controller.ts:199](https://github.com/TanStack/form/blob/main/packages/lit-form/src/tanstack-form-controller.ts#L199)
## Methods
### field()
```ts
-field(fieldConfig, render): object
+field(fieldConfig, render): object
```
-Defined in: [tanstack-form-controller.ts:112](https://github.com/TanStack/form/blob/main/packages/lit-form/src/tanstack-form-controller.ts#L112)
+Defined in: [tanstack-form-controller.ts:253](https://github.com/TanStack/form/blob/main/packages/lit-form/src/tanstack-form-controller.ts#L253)
#### Type Parameters
@@ -71,15 +89,29 @@ Defined in: [tanstack-form-controller.ts:112](https://github.com/TanStack/form/b
• **TData** = `DeepValue`\<`TParentData`, `TName`, `IsNullable`\<`TParentData`\>\>
+• **TOnMountReturn** = `undefined`
+
+• **TOnChangeReturn** = `undefined`
+
+• **TOnChangeAsyncReturn** = `undefined`
+
+• **TOnBlurReturn** = `undefined`
+
+• **TOnBlurAsyncReturn** = `undefined`
+
+• **TOnSubmitReturn** = `undefined`
+
+• **TOnSubmitAsyncReturn** = `undefined`
+
#### Parameters
##### fieldConfig
-`FieldOptions`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\>
+`FieldOptions`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`, `TOnMountReturn`, `TOnChangeReturn`, `TOnChangeAsyncReturn`, `TOnBlurReturn`, `TOnBlurAsyncReturn`, `TOnSubmitReturn`, `TOnSubmitAsyncReturn`\>
##### render
-`renderCallback`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\>
+`renderCallback`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`, `TOnMountReturn`, `TOnChangeReturn`, `TOnChangeAsyncReturn`, `TOnBlurReturn`, `TOnBlurAsyncReturn`, `TOnSubmitReturn`, `TOnSubmitAsyncReturn`, `TFormOnMountReturn`, `TFormOnChangeReturn`, `TFormOnChangeAsyncReturn`, `TFormOnBlurReturn`, `TFormOnBlurAsyncReturn`, `TFormOnSubmitReturn`, `TFormOnSubmitAsyncReturn`, `TFormOnServerReturn`\>
#### Returns
@@ -100,13 +132,13 @@ form: FormApi;
###### values.options
```ts
-options: FieldOptions;
+options: FieldOptions;
```
###### values.render
```ts
-render: renderCallback;
+render: renderCallback;
```
***
@@ -117,7 +149,7 @@ render: renderCallback
+
# @tanstack/lit-form
## Classes
diff --git a/docs/framework/react/guides/basic-concepts.md b/docs/framework/react/guides/basic-concepts.md
index a8528eb4f..4371617e3 100644
--- a/docs/framework/react/guides/basic-concepts.md
+++ b/docs/framework/react/guides/basic-concepts.md
@@ -38,7 +38,7 @@ const form = useForm({
You may also create a form instance without using `formOptions` by using the standalone `useForm` API:
```tsx
-const form = useForm({
+const form = useForm({
onSubmit: async ({ value }) => {
// Do something with form data
console.log(value)
@@ -47,7 +47,7 @@ const form = useForm({
firstName: '',
lastName: '',
hobbies: [],
- },
+ } as Person,
})
```
diff --git a/docs/framework/react/guides/validation.md b/docs/framework/react/guides/validation.md
index e8a9ff26f..6b471801d 100644
--- a/docs/framework/react/guides/validation.md
+++ b/docs/framework/react/guides/validation.md
@@ -150,6 +150,31 @@ Or use the `errorMap` property to access the specific error you're looking for:
```
+It's worth mentioning that our `errors` array and the `errorMap` matches the types returned by the validators. This means that:
+
+```tsx
+
+ value < 13 ? {isOldEnough: false} : undefined,
+ }}
+>
+ {(field) => (
+ <>
+ {/* ... */}
+ {/* errorMap.onChange is type `{isOldEnough: false} | undefined` */}
+ {/* meta.errors is type `Array<{isOldEnough: false} | undefined>` */}
+ {!field.state.meta.errorMap['onChange']?.isOldEnough ? (
+ The user is not old enough
+ ) : null}
+
+ )}
+
+```
+
+
+
## Validation at field level vs at form level
As shown above, each `` accepts its own validation rules via the `onChange`, `onBlur` etc... callbacks. It is also possible to define validation rules at the form level (as opposed to field by field) by passing similar callbacks to the `useForm()` hook.
diff --git a/docs/framework/react/reference/functions/field.md b/docs/framework/react/reference/functions/field.md
index 908bd0d99..6395c20d1 100644
--- a/docs/framework/react/reference/functions/field.md
+++ b/docs/framework/react/reference/functions/field.md
@@ -3,13 +3,15 @@ id: Field
title: Field
---
+
+
# Function: Field()
```ts
-function Field(__namedParameters): ReactNode
+function Field(__namedParameters): ReactNode
```
-Defined in: [packages/react-form/src/useField.tsx:164](https://github.com/TanStack/form/blob/main/packages/react-form/src/useField.tsx#L164)
+Defined in: [packages/react-form/src/useField.tsx:339](https://github.com/TanStack/form/blob/main/packages/react-form/src/useField.tsx#L339)
A function component that takes field options and a render function as children and returns a React component.
@@ -29,11 +31,39 @@ The `Field` component uses the `useField` hook internally to manage the field in
• **TData** = `DeepValue`\<`TParentData`, `TName`\>
+• **TOnMountReturn** = `undefined`
+
+• **TOnChangeReturn** = `undefined`
+
+• **TOnChangeAsyncReturn** = `undefined`
+
+• **TOnBlurReturn** = `undefined`
+
+• **TOnBlurAsyncReturn** = `undefined`
+
+• **TOnSubmitReturn** = `undefined`
+
+• **TOnSubmitAsyncReturn** = `undefined`
+
+• **TFormOnMountReturn** = `undefined`
+
+• **TFormOnChangeReturn** = `undefined`
+
+• **TFormOnChangeAsyncReturn** = `undefined`
+
+• **TFormOnBlurReturn** = `undefined`
+
+• **TFormOnBlurAsyncReturn** = `undefined`
+
+• **TFormOnSubmitReturn** = `undefined`
+
+• **TFormOnSubmitAsyncReturn** = `undefined`
+
## Parameters
### \_\_namedParameters
-`FieldComponentProps`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\>
+`FieldComponentProps`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`, `TOnMountReturn`, `TOnChangeReturn`, `TOnChangeAsyncReturn`, `TOnBlurReturn`, `TOnBlurAsyncReturn`, `TOnSubmitReturn`, `TOnSubmitAsyncReturn`, `TFormOnMountReturn`, `TFormOnChangeReturn`, `TFormOnChangeAsyncReturn`, `TFormOnBlurReturn`, `TFormOnBlurAsyncReturn`, `TFormOnSubmitReturn`, `TFormOnSubmitAsyncReturn`\>
## Returns
diff --git a/docs/framework/react/reference/functions/usefield.md b/docs/framework/react/reference/functions/usefield.md
index 72bc66835..cea1825ca 100644
--- a/docs/framework/react/reference/functions/usefield.md
+++ b/docs/framework/react/reference/functions/usefield.md
@@ -3,13 +3,15 @@ id: useField
title: useField
---
+
+
# Function: useField()
```ts
-function useField(opts): FieldApi & ReactFieldApi
+function useField(opts): FieldApi & ReactFieldApi
```
-Defined in: [packages/react-form/src/useField.tsx:50](https://github.com/TanStack/form/blob/main/packages/react-form/src/useField.tsx#L50)
+Defined in: [packages/react-form/src/useField.tsx:121](https://github.com/TanStack/form/blob/main/packages/react-form/src/useField.tsx#L121)
A hook for managing a field in a form.
@@ -27,16 +29,44 @@ A hook for managing a field in a form.
• **TData** = `DeepValue`\<`TParentData`, `TName`\>
+• **TOnMountReturn** = `undefined`
+
+• **TOnChangeReturn** = `undefined`
+
+• **TOnChangeAsyncReturn** = `undefined`
+
+• **TOnBlurReturn** = `undefined`
+
+• **TOnBlurAsyncReturn** = `undefined`
+
+• **TOnSubmitReturn** = `undefined`
+
+• **TOnSubmitAsyncReturn** = `undefined`
+
+• **TFormOnMountReturn** = `undefined`
+
+• **TFormOnChangeReturn** = `undefined`
+
+• **TFormOnChangeAsyncReturn** = `undefined`
+
+• **TFormOnBlurReturn** = `undefined`
+
+• **TFormOnBlurAsyncReturn** = `undefined`
+
+• **TFormOnSubmitReturn** = `undefined`
+
+• **TFormOnSubmitAsyncReturn** = `undefined`
+
## Parameters
### opts
-`UseFieldOptions`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\>
+`UseFieldOptions`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`, `TOnMountReturn`, `TOnChangeReturn`, `TOnChangeAsyncReturn`, `TOnBlurReturn`, `TOnBlurAsyncReturn`, `TOnSubmitReturn`, `TOnSubmitAsyncReturn`, `TFormOnMountReturn`, `TFormOnChangeReturn`, `TFormOnChangeAsyncReturn`, `TFormOnBlurReturn`, `TFormOnBlurAsyncReturn`, `TFormOnSubmitReturn`, `TFormOnSubmitAsyncReturn`\>
An object with field options.
## Returns
-`FieldApi`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\> & `ReactFieldApi`\<`TParentData`, `TFormValidator`\>
+`FieldApi`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`, `TOnMountReturn`, `TOnChangeReturn`, `TOnChangeAsyncReturn`, `TOnBlurReturn`, `TOnBlurAsyncReturn`, `TOnSubmitReturn`, `TOnSubmitAsyncReturn`, `TFormOnMountReturn`, `TFormOnChangeReturn`, `TFormOnChangeAsyncReturn`, `TFormOnBlurReturn`, `TFormOnBlurAsyncReturn`, `TFormOnSubmitReturn`, `TFormOnSubmitAsyncReturn`\> & `ReactFieldApi`\<`TParentData`, `TFormValidator`\>
The `FieldApi` instance for the specified field.
diff --git a/docs/framework/react/reference/functions/useform.md b/docs/framework/react/reference/functions/useform.md
index 826335c33..757c5ad26 100644
--- a/docs/framework/react/reference/functions/useform.md
+++ b/docs/framework/react/reference/functions/useform.md
@@ -3,13 +3,15 @@ id: useForm
title: useForm
---
+
+
# Function: useForm()
```ts
-function useForm(opts?): ReactFormExtendedApi
+function useForm(opts?): ReactFormExtendedApi
```
-Defined in: [packages/react-form/src/useForm.tsx:57](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L57)
+Defined in: [packages/react-form/src/useForm.tsx:134](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L134)
A custom React Hook that returns an extended instance of the `FormApi` class.
@@ -21,12 +23,26 @@ This API encapsulates all the necessary functionalities related to the form. It
• **TFormValidator** *extends* `undefined` \| `Validator`\<`TFormData`, `unknown`\> = `undefined`
+• **TOnMountReturn** = `undefined`
+
+• **TOnChangeReturn** = `undefined`
+
+• **TOnChangeAsyncReturn** = `undefined`
+
+• **TOnBlurReturn** = `undefined`
+
+• **TOnBlurAsyncReturn** = `undefined`
+
+• **TOnSubmitReturn** = `undefined`
+
+• **TOnSubmitAsyncReturn** = `undefined`
+
## Parameters
### opts?
-`FormOptions`\<`TFormData`, `TFormValidator`\>
+`FormOptions`\<`TFormData`, `TFormValidator`, `TOnMountReturn`, `TOnChangeReturn`, `TOnChangeAsyncReturn`, `TOnBlurReturn`, `TOnBlurAsyncReturn`, `TOnSubmitReturn`, `TOnSubmitAsyncReturn`\>
## Returns
-[`ReactFormExtendedApi`](../type-aliases/reactformextendedapi.md)\<`TFormData`, `TFormValidator`\>
+[`ReactFormExtendedApi`](../type-aliases/reactformextendedapi.md)\<`TFormData`, `TFormValidator`, `TOnMountReturn`, `TOnChangeReturn`, `TOnChangeAsyncReturn`, `TOnBlurReturn`, `TOnBlurAsyncReturn`, `TOnSubmitReturn`, `TOnSubmitAsyncReturn`\>
diff --git a/docs/framework/react/reference/functions/usestore.md b/docs/framework/react/reference/functions/usestore.md
index 76f60a8b8..2b982db00 100644
--- a/docs/framework/react/reference/functions/usestore.md
+++ b/docs/framework/react/reference/functions/usestore.md
@@ -3,6 +3,8 @@ id: useStore
title: useStore
---
+
+
# Function: useStore()
## Call Signature
diff --git a/docs/framework/react/reference/functions/usetransform.md b/docs/framework/react/reference/functions/usetransform.md
index 737c8c8af..2979e7179 100644
--- a/docs/framework/react/reference/functions/usetransform.md
+++ b/docs/framework/react/reference/functions/usetransform.md
@@ -3,10 +3,12 @@ id: useTransform
title: useTransform
---
+
+
# Function: useTransform()
```ts
-function useTransform(fn, deps): FormTransform
+function useTransform(fn, deps): FormTransform
```
Defined in: [packages/react-form/src/useTransform.ts:3](https://github.com/TanStack/form/blob/main/packages/react-form/src/useTransform.ts#L3)
@@ -17,11 +19,25 @@ Defined in: [packages/react-form/src/useTransform.ts:3](https://github.com/TanSt
• **TFormValidator** *extends* `undefined` \| `Validator`\<`TFormData`, `unknown`\> = `undefined`
+• **TOnMountReturn** = `undefined`
+
+• **TOnChangeReturn** = `undefined`
+
+• **TOnChangeAsyncReturn** = `undefined`
+
+• **TOnBlurReturn** = `undefined`
+
+• **TOnBlurAsyncReturn** = `undefined`
+
+• **TOnSubmitReturn** = `undefined`
+
+• **TOnSubmitAsyncReturn** = `undefined`
+
## Parameters
### fn
-(`formBase`) => `FormApi`\<`TFormData`, `TFormValidator`\>
+(`formBase`) => `FormApi`\<`TFormData`, `TFormValidator`, `TOnMountReturn`, `TOnChangeReturn`, `TOnChangeAsyncReturn`, `TOnBlurReturn`, `TOnBlurAsyncReturn`, `TOnSubmitReturn`, `TOnSubmitAsyncReturn`\>
### deps
@@ -29,4 +45,4 @@ Defined in: [packages/react-form/src/useTransform.ts:3](https://github.com/TanSt
## Returns
-`FormTransform`\<`TFormData`, `TFormValidator`\>
+`FormTransform`\<`TFormData`, `TFormValidator`, `TOnMountReturn`, `TOnChangeReturn`, `TOnChangeAsyncReturn`, `TOnBlurReturn`, `TOnBlurAsyncReturn`, `TOnSubmitReturn`, `TOnSubmitAsyncReturn`\>
diff --git a/docs/framework/react/reference/index.md b/docs/framework/react/reference/index.md
index 599a63e0b..b9c06deaf 100644
--- a/docs/framework/react/reference/index.md
+++ b/docs/framework/react/reference/index.md
@@ -3,6 +3,8 @@ id: "@tanstack/react-form"
title: "@tanstack/react-form"
---
+
+
# @tanstack/react-form
## Interfaces
diff --git a/docs/framework/react/reference/interfaces/reactformapi.md b/docs/framework/react/reference/interfaces/reactformapi.md
index b53804b8d..9837eabc2 100644
--- a/docs/framework/react/reference/interfaces/reactformapi.md
+++ b/docs/framework/react/reference/interfaces/reactformapi.md
@@ -3,9 +3,11 @@ id: ReactFormApi
title: ReactFormApi
---
-# Interface: ReactFormApi\
+
-Defined in: [packages/react-form/src/useForm.tsx:14](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L14)
+# Interface: ReactFormApi\
+
+Defined in: [packages/react-form/src/useForm.tsx:20](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L20)
Fields that are added onto the `FormAPI` from `@tanstack/form-core` and returned from `useForm`
@@ -15,15 +17,29 @@ Fields that are added onto the `FormAPI` from `@tanstack/form-core` and returned
• **TFormValidator** *extends* `Validator`\<`TFormData`, `unknown`\> \| `undefined` = `undefined`
+• **TOnMountReturn** = `undefined`
+
+• **TOnChangeReturn** = `undefined`
+
+• **TOnChangeAsyncReturn** = `undefined`
+
+• **TOnBlurReturn** = `undefined`
+
+• **TOnBlurAsyncReturn** = `undefined`
+
+• **TOnSubmitReturn** = `undefined`
+
+• **TOnSubmitAsyncReturn** = `undefined`
+
## Properties
### Field
```ts
-Field: FieldComponent;
+Field: FieldComponent;
```
-Defined in: [packages/react-form/src/useForm.tsx:21](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L21)
+Defined in: [packages/react-form/src/useForm.tsx:34](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L34)
A React component to render form fields. With this, you can render and manage individual form fields.
@@ -35,13 +51,13 @@ A React component to render form fields. With this, you can render and manage in
Subscribe: (props) => ReactNode;
```
-Defined in: [packages/react-form/src/useForm.tsx:25](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L25)
+Defined in: [packages/react-form/src/useForm.tsx:48](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L48)
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`\>
+• **TSelected** = `FormState`\<`TFormData`, `TOnMountReturn`, `TOnChangeReturn`, `TOnChangeAsyncReturn`, `TOnBlurReturn`, `TOnBlurAsyncReturn`, `TOnSubmitReturn`, `TOnSubmitAsyncReturn`\>
#### Parameters
diff --git a/docs/framework/react/reference/type-aliases/fieldcomponent.md b/docs/framework/react/reference/type-aliases/fieldcomponent.md
index 00fc39ca7..cb3001163 100644
--- a/docs/framework/react/reference/type-aliases/fieldcomponent.md
+++ b/docs/framework/react/reference/type-aliases/fieldcomponent.md
@@ -3,16 +3,18 @@ id: FieldComponent
title: FieldComponent
---
-# Type Alias: FieldComponent()\
+
+
+# Type Alias: FieldComponent()\
```ts
-type FieldComponent = ({
+type FieldComponent = ({
children,
...fieldOptions
}) => ReactNode;
```
-Defined in: [packages/react-form/src/useField.tsx:134](https://github.com/TanStack/form/blob/main/packages/react-form/src/useField.tsx#L134)
+Defined in: [packages/react-form/src/useField.tsx:281](https://github.com/TanStack/form/blob/main/packages/react-form/src/useField.tsx#L281)
A type alias representing a field component for a specific form data type.
@@ -22,6 +24,20 @@ A type alias representing a field component for a specific form data type.
• **TFormValidator** *extends* `Validator`\<`TParentData`, `unknown`\> \| `undefined` = `undefined`
+• **TFormOnMountReturn** = `undefined`
+
+• **TFormOnChangeReturn** = `undefined`
+
+• **TFormOnChangeAsyncReturn** = `undefined`
+
+• **TFormOnBlurReturn** = `undefined`
+
+• **TFormOnBlurAsyncReturn** = `undefined`
+
+• **TFormOnSubmitReturn** = `undefined`
+
+• **TFormOnSubmitAsyncReturn** = `undefined`
+
## Type Parameters
• **TName** *extends* `DeepKeys`\<`TParentData`\>
@@ -32,6 +48,20 @@ A type alias representing a field component for a specific form data type.
• **TData** *extends* `DeepValue`\<`TParentData`, `TName`\> = `DeepValue`\<`TParentData`, `TName`\>
+• **TOnMountReturn** = `undefined`
+
+• **TOnChangeReturn** = `undefined`
+
+• **TOnChangeAsyncReturn** = `undefined`
+
+• **TOnBlurReturn** = `undefined`
+
+• **TOnBlurAsyncReturn** = `undefined`
+
+• **TOnSubmitReturn** = `undefined`
+
+• **TOnSubmitAsyncReturn** = `undefined`
+
## Parameters
### \{
@@ -39,7 +69,7 @@ A type alias representing a field component for a specific form data type.
...fieldOptions
\}
-`Omit`\<`FieldComponentProps`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\>, `"form"`\>
+`Omit`\<`FieldComponentProps`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`, `TOnMountReturn`, `TOnChangeReturn`, `TOnChangeAsyncReturn`, `TOnBlurReturn`, `TOnBlurAsyncReturn`, `TOnSubmitReturn`, `TOnSubmitAsyncReturn`, `TFormOnMountReturn`, `TFormOnChangeReturn`, `TFormOnChangeAsyncReturn`, `TFormOnBlurReturn`, `TFormOnBlurAsyncReturn`, `TFormOnSubmitReturn`, `TFormOnSubmitAsyncReturn`\>, `"form"`\>
## Returns
diff --git a/docs/framework/react/reference/type-aliases/reactformextendedapi.md b/docs/framework/react/reference/type-aliases/reactformextendedapi.md
index ec56e7c0d..fc3e7d117 100644
--- a/docs/framework/react/reference/type-aliases/reactformextendedapi.md
+++ b/docs/framework/react/reference/type-aliases/reactformextendedapi.md
@@ -3,13 +3,15 @@ id: ReactFormExtendedApi
title: ReactFormExtendedApi
---
-# Type Alias: ReactFormExtendedApi\
+
+
+# Type Alias: ReactFormExtendedApi\
```ts
-type ReactFormExtendedApi = FormApi & ReactFormApi;
+type ReactFormExtendedApi = FormApi & ReactFormApi;
```
-Defined in: [packages/react-form/src/useForm.tsx:34](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L34)
+Defined in: [packages/react-form/src/useForm.tsx:83](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L83)
An extended version of the `FormApi` class that includes React-specific functionalities from `ReactFormApi`
@@ -18,3 +20,17 @@ An extended version of the `FormApi` class that includes React-specific function
• **TFormData**
• **TFormValidator** *extends* `Validator`\<`TFormData`, `unknown`\> \| `undefined` = `undefined`
+
+• **TOnMountReturn** = `undefined`
+
+• **TOnChangeReturn** = `undefined`
+
+• **TOnChangeAsyncReturn** = `undefined`
+
+• **TOnBlurReturn** = `undefined`
+
+• **TOnBlurAsyncReturn** = `undefined`
+
+• **TOnSubmitReturn** = `undefined`
+
+• **TOnSubmitAsyncReturn** = `undefined`
diff --git a/docs/framework/react/reference/type-aliases/usefield.md b/docs/framework/react/reference/type-aliases/usefield.md
index 6ebd1f268..fbb751602 100644
--- a/docs/framework/react/reference/type-aliases/usefield.md
+++ b/docs/framework/react/reference/type-aliases/usefield.md
@@ -3,13 +3,15 @@ id: UseField
title: UseField
---
-# Type Alias: UseField()\
+
+
+# Type Alias: UseField()\
```ts
-type UseField = (opts) => FieldApi;
+type UseField = (opts) => FieldApi;
```
-Defined in: [packages/react-form/src/useField.tsx:26](https://github.com/TanStack/form/blob/main/packages/react-form/src/useField.tsx#L26)
+Defined in: [packages/react-form/src/useField.tsx:43](https://github.com/TanStack/form/blob/main/packages/react-form/src/useField.tsx#L43)
A type representing a hook for using a field in a form with the given form data type.
@@ -21,6 +23,20 @@ A function that takes an optional object with a `name` property and field option
• **TFormValidator** *extends* `Validator`\<`TParentData`, `unknown`\> \| `undefined` = `undefined`
+• **TFormOnMountReturn** = `undefined`
+
+• **TFormOnChangeReturn** = `undefined`
+
+• **TFormOnChangeAsyncReturn** = `undefined`
+
+• **TFormOnBlurReturn** = `undefined`
+
+• **TFormOnBlurAsyncReturn** = `undefined`
+
+• **TFormOnSubmitReturn** = `undefined`
+
+• **TFormOnSubmitAsyncReturn** = `undefined`
+
## Type Parameters
• **TName** *extends* `DeepKeys`\<`TParentData`\>
@@ -31,12 +47,26 @@ A function that takes an optional object with a `name` property and field option
• **TData** *extends* `DeepValue`\<`TParentData`, `TName`\> = `DeepValue`\<`TParentData`, `TName`\>
+• **TOnMountReturn** = `undefined`
+
+• **TOnChangeReturn** = `undefined`
+
+• **TOnChangeAsyncReturn** = `undefined`
+
+• **TOnBlurReturn** = `undefined`
+
+• **TOnBlurAsyncReturn** = `undefined`
+
+• **TOnSubmitReturn** = `undefined`
+
+• **TOnSubmitAsyncReturn** = `undefined`
+
## Parameters
### opts
-`Omit`\<`UseFieldOptions`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\>, `"form"`\>
+`Omit`\<`UseFieldOptions`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`, `TOnMountReturn`, `TOnChangeReturn`, `TOnChangeAsyncReturn`, `TOnBlurReturn`, `TOnBlurAsyncReturn`, `TOnSubmitReturn`, `TOnSubmitAsyncReturn`, `TFormOnMountReturn`, `TFormOnChangeReturn`, `TFormOnChangeAsyncReturn`, `TFormOnBlurReturn`, `TFormOnBlurAsyncReturn`, `TFormOnSubmitReturn`, `TFormOnSubmitAsyncReturn`\>, `"form"`\>
## Returns
-`FieldApi`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\>
+`FieldApi`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`, `TOnMountReturn`, `TOnChangeReturn`, `TOnChangeAsyncReturn`, `TOnBlurReturn`, `TOnBlurAsyncReturn`, `TOnSubmitReturn`, `TOnSubmitAsyncReturn`, `TFormOnMountReturn`, `TFormOnChangeReturn`, `TFormOnChangeAsyncReturn`, `TFormOnBlurReturn`, `TFormOnBlurAsyncReturn`, `TFormOnSubmitReturn`, `TFormOnSubmitAsyncReturn`\>
diff --git a/docs/framework/solid/guides/validation.md b/docs/framework/solid/guides/validation.md
index 08c60857b..74c2c7d73 100644
--- a/docs/framework/solid/guides/validation.md
+++ b/docs/framework/solid/guides/validation.md
@@ -152,6 +152,32 @@ Or use the `errorMap` property to access the specific error you're looking for:
```
+
+It's worth mentioning that our `errors` array and the `errorMap` matches the types returned by the validators. This means that:
+
+```tsx
+
+ value < 13 ? {isOldEnough: false} : undefined,
+ }}
+>
+ {(field) => (
+ <>
+ {/* ... */}
+ {/* errorMap.onChange is type `{isOldEnough: false} | undefined` */}
+ {/* meta.errors is type `Array<{isOldEnough: false} | undefined>` */}
+ {!field().state.meta.errorMap['onChange']?.isOldEnough ? (
+ The user is not old enough
+ ) : null}
+
+ )}
+
+```
+
+
+
## Validation at field level vs at form level
As shown above, each `` accepts its own validation rules via the `onChange`, `onBlur` etc... callbacks. It is also possible to define validation rules at the form level (as opposed to field by field) by passing similar callbacks to the `createForm()` hook.
diff --git a/docs/framework/solid/reference/functions/createfield.md b/docs/framework/solid/reference/functions/createfield.md
index 6befedc54..424370e5e 100644
--- a/docs/framework/solid/reference/functions/createfield.md
+++ b/docs/framework/solid/reference/functions/createfield.md
@@ -3,13 +3,15 @@ id: createField
title: createField
---
+
+
# Function: createField()
```ts
-function createField(opts): () => never
+function createField(opts): () => FieldApi & SolidFieldApi
```
-Defined in: [packages/solid-form/src/createField.tsx:87](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createField.tsx#L87)
+Defined in: [packages/solid-form/src/createField.tsx:237](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createField.tsx#L237)
## Type Parameters
@@ -25,11 +27,41 @@ Defined in: [packages/solid-form/src/createField.tsx:87](https://github.com/TanS
• **TData** = `DeepValue`\<`TParentData`, `TName`\>
+• **TOnMountReturn** = `undefined`
+
+• **TOnChangeReturn** = `undefined`
+
+• **TOnChangeAsyncReturn** = `undefined`
+
+• **TOnBlurReturn** = `undefined`
+
+• **TOnBlurAsyncReturn** = `undefined`
+
+• **TOnSubmitReturn** = `undefined`
+
+• **TOnSubmitAsyncReturn** = `undefined`
+
+• **TFormOnMountReturn** = `undefined`
+
+• **TFormOnChangeReturn** = `undefined`
+
+• **TFormOnChangeAsyncReturn** = `undefined`
+
+• **TFormOnBlurReturn** = `undefined`
+
+• **TFormOnBlurAsyncReturn** = `undefined`
+
+• **TFormOnSubmitReturn** = `undefined`
+
+• **TFormOnSubmitAsyncReturn** = `undefined`
+
+• **TFormOnServerReturn** = `undefined`
+
## Parameters
### opts
-() => `CreateFieldOptions`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\>
+() => `CreateFieldOptions`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`, `TOnMountReturn`, `TOnChangeReturn`, `TOnChangeAsyncReturn`, `TOnBlurReturn`, `TOnBlurAsyncReturn`, `TOnSubmitReturn`, `TOnSubmitAsyncReturn`, `TFormOnMountReturn`, `TFormOnChangeReturn`, `TFormOnChangeAsyncReturn`, `TFormOnBlurReturn`, `TFormOnBlurAsyncReturn`, `TFormOnSubmitReturn`, `TFormOnSubmitAsyncReturn`, `TFormOnServerReturn`\>
## Returns
@@ -37,4 +69,4 @@ Defined in: [packages/solid-form/src/createField.tsx:87](https://github.com/TanS
### Returns
-`never`
+`FieldApi`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`, `TOnMountReturn`, `TOnChangeReturn`, `TOnChangeAsyncReturn`, `TOnBlurReturn`, `TOnBlurAsyncReturn`, `TOnSubmitReturn`, `TOnSubmitAsyncReturn`, `TFormOnMountReturn`, `TFormOnChangeReturn`, `TFormOnChangeAsyncReturn`, `TFormOnBlurReturn`, `TFormOnBlurAsyncReturn`, `TFormOnSubmitReturn`, `TFormOnSubmitAsyncReturn`, `TFormOnServerReturn`\> & `SolidFieldApi`\<`TParentData`, `TFormValidator`, `TFormOnMountReturn`, `TFormOnChangeReturn`, `TFormOnChangeAsyncReturn`, `TFormOnBlurReturn`, `TFormOnBlurAsyncReturn`, `TFormOnSubmitReturn`, `TFormOnSubmitAsyncReturn`, `TFormOnServerReturn`\>
diff --git a/docs/framework/solid/reference/functions/createform.md b/docs/framework/solid/reference/functions/createform.md
index 4408204c0..3f57871c6 100644
--- a/docs/framework/solid/reference/functions/createform.md
+++ b/docs/framework/solid/reference/functions/createform.md
@@ -3,13 +3,15 @@ id: createForm
title: createForm
---
+
+
# Function: createForm()
```ts
-function createForm(opts?): FormApi & SolidFormApi
+function createForm(opts?): FormApi & SolidFormApi
```
-Defined in: [packages/solid-form/src/createForm.tsx:26](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createForm.tsx#L26)
+Defined in: [packages/solid-form/src/createForm.tsx:112](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createForm.tsx#L112)
## Type Parameters
@@ -17,12 +19,28 @@ Defined in: [packages/solid-form/src/createForm.tsx:26](https://github.com/TanSt
• **TFormValidator** *extends* `undefined` \| `Validator`\<`TParentData`, `unknown`\> = `undefined`
+• **TFormOnMountReturn** = `undefined`
+
+• **TFormOnChangeReturn** = `undefined`
+
+• **TFormOnChangeAsyncReturn** = `undefined`
+
+• **TFormOnBlurReturn** = `undefined`
+
+• **TFormOnBlurAsyncReturn** = `undefined`
+
+• **TFormOnSubmitReturn** = `undefined`
+
+• **TFormOnSubmitAsyncReturn** = `undefined`
+
+• **TFormOnServerReturn** = `undefined`
+
## Parameters
### opts?
-() => `FormOptions`\<`TParentData`, `TFormValidator`\>
+() => `FormOptions`\<`TParentData`, `TFormValidator`, `TFormOnMountReturn`, `TFormOnChangeReturn`, `TFormOnChangeAsyncReturn`, `TFormOnBlurReturn`, `TFormOnBlurAsyncReturn`, `TFormOnSubmitReturn`, `TFormOnSubmitAsyncReturn`, `TFormOnServerReturn`\>
## Returns
-`FormApi`\<`TParentData`, `TFormValidator`\> & [`SolidFormApi`](../interfaces/solidformapi.md)\<`TParentData`, `TFormValidator`\>
+`FormApi`\<`TParentData`, `TFormValidator`, `TFormOnMountReturn`, `TFormOnChangeReturn`, `TFormOnChangeAsyncReturn`, `TFormOnBlurReturn`, `TFormOnBlurAsyncReturn`, `TFormOnSubmitReturn`, `TFormOnSubmitAsyncReturn`, `TFormOnServerReturn`\> & [`SolidFormApi`](../interfaces/solidformapi.md)\<`TParentData`, `TFormValidator`, `TFormOnMountReturn`, `TFormOnChangeReturn`, `TFormOnChangeAsyncReturn`, `TFormOnBlurReturn`, `TFormOnBlurAsyncReturn`, `TFormOnSubmitReturn`, `TFormOnSubmitAsyncReturn`, `TFormOnServerReturn`\>
diff --git a/docs/framework/solid/reference/functions/field.md b/docs/framework/solid/reference/functions/field.md
index 7cb6956d1..80f982927 100644
--- a/docs/framework/solid/reference/functions/field.md
+++ b/docs/framework/solid/reference/functions/field.md
@@ -3,13 +3,15 @@ id: Field
title: Field
---
+
+
# Function: Field()
```ts
-function Field(props): Element
+function Field(props): Element
```
-Defined in: [packages/solid-form/src/createField.tsx:196](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createField.tsx#L196)
+Defined in: [packages/solid-form/src/createField.tsx:483](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createField.tsx#L483)
## Type Parameters
@@ -25,11 +27,41 @@ Defined in: [packages/solid-form/src/createField.tsx:196](https://github.com/Tan
• **TData** = `DeepValue`\<`TParentData`, `TName`\>
+• **TOnMountReturn** = `undefined`
+
+• **TOnChangeReturn** = `undefined`
+
+• **TOnChangeAsyncReturn** = `undefined`
+
+• **TOnBlurReturn** = `undefined`
+
+• **TOnBlurAsyncReturn** = `undefined`
+
+• **TOnSubmitReturn** = `undefined`
+
+• **TOnSubmitAsyncReturn** = `undefined`
+
+• **TFormOnMountReturn** = `undefined`
+
+• **TFormOnChangeReturn** = `undefined`
+
+• **TFormOnChangeAsyncReturn** = `undefined`
+
+• **TFormOnBlurReturn** = `undefined`
+
+• **TFormOnBlurAsyncReturn** = `undefined`
+
+• **TFormOnSubmitReturn** = `undefined`
+
+• **TFormOnSubmitAsyncReturn** = `undefined`
+
+• **TFormOnServerReturn** = `undefined`
+
## Parameters
### props
-`object` & `FieldApiOptions`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\> & `object`
+`object` & `FieldApiOptions`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`, `TOnMountReturn`, `TOnChangeReturn`, `TOnChangeAsyncReturn`, `TOnBlurReturn`, `TOnBlurAsyncReturn`, `TOnSubmitReturn`, `TOnSubmitAsyncReturn`, `TFormOnMountReturn`, `TFormOnChangeReturn`, `TFormOnChangeAsyncReturn`, `TFormOnBlurReturn`, `TFormOnBlurAsyncReturn`, `TFormOnSubmitReturn`, `TFormOnSubmitAsyncReturn`, `TFormOnServerReturn`\> & `object`
## Returns
diff --git a/docs/framework/solid/reference/functions/usestore.md b/docs/framework/solid/reference/functions/usestore.md
index b1251110e..a2456113e 100644
--- a/docs/framework/solid/reference/functions/usestore.md
+++ b/docs/framework/solid/reference/functions/usestore.md
@@ -3,6 +3,8 @@ id: useStore
title: useStore
---
+
+
# Function: useStore()
## Call Signature
@@ -11,7 +13,7 @@ title: useStore
function useStore(store, selector?): Accessor
```
-Defined in: node\_modules/.pnpm/@tanstack+solid-store@0.7.0\_solid-js@1.9.3/node\_modules/@tanstack/solid-store/dist/esm/index.d.ts:8
+Defined in: node\_modules/.pnpm/@tanstack+solid-store@0.7.0\_solid-js@1.9.4/node\_modules/@tanstack/solid-store/dist/esm/index.d.ts:8
### Type Parameters
@@ -39,7 +41,7 @@ Defined in: node\_modules/.pnpm/@tanstack+solid-store@0.7.0\_solid-js@1.9.3/node
function useStore(store, selector?): Accessor
```
-Defined in: node\_modules/.pnpm/@tanstack+solid-store@0.7.0\_solid-js@1.9.3/node\_modules/@tanstack/solid-store/dist/esm/index.d.ts:9
+Defined in: node\_modules/.pnpm/@tanstack+solid-store@0.7.0\_solid-js@1.9.4/node\_modules/@tanstack/solid-store/dist/esm/index.d.ts:9
### Type Parameters
diff --git a/docs/framework/solid/reference/index.md b/docs/framework/solid/reference/index.md
index 704a66cb7..29000ff25 100644
--- a/docs/framework/solid/reference/index.md
+++ b/docs/framework/solid/reference/index.md
@@ -3,6 +3,8 @@ id: "@tanstack/solid-form"
title: "@tanstack/solid-form"
---
+
+
# @tanstack/solid-form
## Interfaces
diff --git a/docs/framework/solid/reference/interfaces/solidformapi.md b/docs/framework/solid/reference/interfaces/solidformapi.md
index a0ae50053..6f5caf44e 100644
--- a/docs/framework/solid/reference/interfaces/solidformapi.md
+++ b/docs/framework/solid/reference/interfaces/solidformapi.md
@@ -3,7 +3,9 @@ id: SolidFormApi
title: SolidFormApi
---
-# Interface: SolidFormApi\
+
+
+# Interface: SolidFormApi\
Defined in: [packages/solid-form/src/createForm.tsx:11](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createForm.tsx#L11)
@@ -13,25 +15,41 @@ Defined in: [packages/solid-form/src/createForm.tsx:11](https://github.com/TanSt
• **TFormValidator** *extends* `Validator`\<`TFormData`, `unknown`\> \| `undefined` = `undefined`
+• **TFormOnMountReturn** = `undefined`
+
+• **TFormOnChangeReturn** = `undefined`
+
+• **TFormOnChangeAsyncReturn** = `undefined`
+
+• **TFormOnBlurReturn** = `undefined`
+
+• **TFormOnBlurAsyncReturn** = `undefined`
+
+• **TFormOnSubmitReturn** = `undefined`
+
+• **TFormOnSubmitAsyncReturn** = `undefined`
+
+• **TFormOnServerReturn** = `undefined`
+
## Properties
### createField
```ts
-createField: CreateField;
+createField: CreateField;
```
-Defined in: [packages/solid-form/src/createForm.tsx:16](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createForm.tsx#L16)
+Defined in: [packages/solid-form/src/createForm.tsx:35](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createForm.tsx#L35)
***
### Field
```ts
-Field: FieldComponent;
+Field: FieldComponent;
```
-Defined in: [packages/solid-form/src/createForm.tsx:15](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createForm.tsx#L15)
+Defined in: [packages/solid-form/src/createForm.tsx:23](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createForm.tsx#L23)
***
@@ -41,11 +59,11 @@ Defined in: [packages/solid-form/src/createForm.tsx:15](https://github.com/TanSt
Subscribe: (props) => Element;
```
-Defined in: [packages/solid-form/src/createForm.tsx:20](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createForm.tsx#L20)
+Defined in: [packages/solid-form/src/createForm.tsx:78](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createForm.tsx#L78)
#### Type Parameters
-• **TSelected** = `FormState`\<`TFormData`\>
+• **TSelected** = `FormState`\<`TFormData`, `TFormOnMountReturn`, `TFormOnChangeReturn`, `TFormOnChangeAsyncReturn`, `TFormOnBlurReturn`, `TFormOnBlurAsyncReturn`, `TFormOnSubmitReturn`, `TFormOnSubmitAsyncReturn`, `TFormOnServerReturn`\>
#### Parameters
@@ -71,11 +89,11 @@ Defined in: [packages/solid-form/src/createForm.tsx:20](https://github.com/TanSt
useStore: (selector?) => () => TSelected;
```
-Defined in: [packages/solid-form/src/createForm.tsx:17](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createForm.tsx#L17)
+Defined in: [packages/solid-form/src/createForm.tsx:47](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createForm.tsx#L47)
#### Type Parameters
-• **TSelected** = `FormState`\<`TFormData`\>
+• **TSelected** = `FormState`\<`TFormData`, `TFormOnMountReturn`, `TFormOnChangeReturn`, `TFormOnChangeAsyncReturn`, `TFormOnBlurReturn`, `TFormOnBlurAsyncReturn`, `TFormOnSubmitReturn`, `TFormOnSubmitAsyncReturn`, `TFormOnServerReturn`\>
#### Parameters
diff --git a/docs/framework/solid/reference/type-aliases/createfield.md b/docs/framework/solid/reference/type-aliases/createfield.md
index 3c91dcf69..69720a9ca 100644
--- a/docs/framework/solid/reference/type-aliases/createfield.md
+++ b/docs/framework/solid/reference/type-aliases/createfield.md
@@ -3,13 +3,15 @@ id: CreateField
title: CreateField
---
-# Type Alias: CreateField()\
+
+
+# Type Alias: CreateField()\
```ts
-type CreateField = (opts) => () => FieldApi & SolidFieldApi;
+type CreateField = (opts) => () => FieldApi & SolidFieldApi;
```
-Defined in: [packages/solid-form/src/createField.tsx:29](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createField.tsx#L29)
+Defined in: [packages/solid-form/src/createField.tsx:48](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createField.tsx#L48)
## Type Parameters
@@ -17,6 +19,22 @@ Defined in: [packages/solid-form/src/createField.tsx:29](https://github.com/TanS
• **TFormValidator** *extends* `Validator`\<`TParentData`, `unknown`\> \| `undefined` = `undefined`
+• **TFormOnMountReturn** = `undefined`
+
+• **TFormOnChangeReturn** = `undefined`
+
+• **TFormOnChangeAsyncReturn** = `undefined`
+
+• **TFormOnBlurReturn** = `undefined`
+
+• **TFormOnBlurAsyncReturn** = `undefined`
+
+• **TFormOnSubmitReturn** = `undefined`
+
+• **TFormOnSubmitAsyncReturn** = `undefined`
+
+• **TFormOnServerReturn** = `undefined`
+
## Type Parameters
• **TName** *extends* `DeepKeys`\<`TParentData`\>
@@ -27,11 +45,25 @@ Defined in: [packages/solid-form/src/createField.tsx:29](https://github.com/TanS
• **TData** *extends* `DeepValue`\<`TParentData`, `TName`\> = `DeepValue`\<`TParentData`, `TName`\>
+• **TOnMountReturn** = `undefined`
+
+• **TOnChangeReturn** = `undefined`
+
+• **TOnChangeAsyncReturn** = `undefined`
+
+• **TOnBlurReturn** = `undefined`
+
+• **TOnBlurAsyncReturn** = `undefined`
+
+• **TOnSubmitReturn** = `undefined`
+
+• **TOnSubmitAsyncReturn** = `undefined`
+
## Parameters
### opts
-() => `object` & `Omit`\<`CreateFieldOptions`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\>, `"form"`\>
+() => `object` & `Omit`\<`CreateFieldOptions`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`, `TOnMountReturn`, `TOnChangeReturn`, `TOnChangeAsyncReturn`, `TOnBlurReturn`, `TOnBlurAsyncReturn`, `TOnSubmitReturn`, `TOnSubmitAsyncReturn`, `TFormOnMountReturn`, `TFormOnChangeReturn`, `TFormOnChangeAsyncReturn`, `TFormOnBlurReturn`, `TFormOnBlurAsyncReturn`, `TFormOnSubmitReturn`, `TFormOnSubmitAsyncReturn`, `TFormOnServerReturn`\>, `"form"`\>
## Returns
@@ -39,4 +71,4 @@ Defined in: [packages/solid-form/src/createField.tsx:29](https://github.com/TanS
### Returns
-`FieldApi`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\> & `SolidFieldApi`\<`TParentData`, `TFormValidator`\>
+`FieldApi`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`, `TOnMountReturn`, `TOnChangeReturn`, `TOnChangeAsyncReturn`, `TOnBlurReturn`, `TOnBlurAsyncReturn`, `TOnSubmitReturn`, `TOnSubmitAsyncReturn`, `TFormOnMountReturn`, `TFormOnChangeReturn`, `TFormOnChangeAsyncReturn`, `TFormOnBlurReturn`, `TFormOnBlurAsyncReturn`, `TFormOnSubmitReturn`, `TFormOnSubmitAsyncReturn`, `TFormOnServerReturn`\> & `SolidFieldApi`\<`TParentData`, `TFormValidator`, `TFormOnMountReturn`, `TFormOnChangeReturn`, `TFormOnChangeAsyncReturn`, `TFormOnBlurReturn`, `TFormOnBlurAsyncReturn`, `TFormOnSubmitReturn`, `TFormOnSubmitAsyncReturn`, `TFormOnServerReturn`\>
diff --git a/docs/framework/solid/reference/type-aliases/fieldcomponent.md b/docs/framework/solid/reference/type-aliases/fieldcomponent.md
index d0464a4ea..a577234a7 100644
--- a/docs/framework/solid/reference/type-aliases/fieldcomponent.md
+++ b/docs/framework/solid/reference/type-aliases/fieldcomponent.md
@@ -3,16 +3,18 @@ id: FieldComponent
title: FieldComponent
---
-# Type Alias: FieldComponent()\
+
+
+# Type Alias: FieldComponent()\
```ts
-type FieldComponent = ({
+type FieldComponent = ({
children,
...fieldOptions
}) => JSXElement;
```
-Defined in: [packages/solid-form/src/createField.tsx:171](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createField.tsx#L171)
+Defined in: [packages/solid-form/src/createField.tsx:428](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createField.tsx#L428)
## Type Parameters
@@ -20,6 +22,22 @@ Defined in: [packages/solid-form/src/createField.tsx:171](https://github.com/Tan
• **TFormValidator** *extends* `Validator`\<`TParentData`, `unknown`\> \| `undefined` = `undefined`
+• **TFormOnMountReturn** = `undefined`
+
+• **TFormOnChangeReturn** = `undefined`
+
+• **TFormOnChangeAsyncReturn** = `undefined`
+
+• **TFormOnBlurReturn** = `undefined`
+
+• **TFormOnBlurAsyncReturn** = `undefined`
+
+• **TFormOnSubmitReturn** = `undefined`
+
+• **TFormOnSubmitAsyncReturn** = `undefined`
+
+• **TFormOnServerReturn** = `undefined`
+
## Type Parameters
• **TName** *extends* `DeepKeys`\<`TParentData`\>
@@ -30,6 +48,20 @@ Defined in: [packages/solid-form/src/createField.tsx:171](https://github.com/Tan
• **TData** *extends* `DeepValue`\<`TParentData`, `TName`\> = `DeepValue`\<`TParentData`, `TName`\>
+• **TOnMountReturn** = `undefined`
+
+• **TOnChangeReturn** = `undefined`
+
+• **TOnChangeAsyncReturn** = `undefined`
+
+• **TOnBlurReturn** = `undefined`
+
+• **TOnBlurAsyncReturn** = `undefined`
+
+• **TOnSubmitReturn** = `undefined`
+
+• **TOnSubmitAsyncReturn** = `undefined`
+
## Parameters
### \{
@@ -37,7 +69,7 @@ Defined in: [packages/solid-form/src/createField.tsx:171](https://github.com/Tan
...fieldOptions
\}
-`Omit`\<`FieldComponentProps`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\>, `"form"`\>
+`Omit`\<`FieldComponentProps`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`, `TOnMountReturn`, `TOnChangeReturn`, `TOnChangeAsyncReturn`, `TOnBlurReturn`, `TOnBlurAsyncReturn`, `TOnSubmitReturn`, `TOnSubmitAsyncReturn`, `TFormOnMountReturn`, `TFormOnChangeReturn`, `TFormOnChangeAsyncReturn`, `TFormOnBlurReturn`, `TFormOnBlurAsyncReturn`, `TFormOnSubmitReturn`, `TFormOnSubmitAsyncReturn`, `TFormOnServerReturn`\>, `"form"`\>
## Returns
diff --git a/docs/framework/vue/guides/basic-concepts.md b/docs/framework/vue/guides/basic-concepts.md
index 86a8a90f9..1dc101e30 100644
--- a/docs/framework/vue/guides/basic-concepts.md
+++ b/docs/framework/vue/guides/basic-concepts.md
@@ -12,12 +12,12 @@ You can create options for your form so that it can be shared between multiple f
Example:
```ts
-const formOpts = formOptions({
+const formOpts = formOptions({
defaultValues: {
firstName: '',
lastName: '',
hobbies: [],
- },
+ } as Person,
})
```
@@ -38,7 +38,7 @@ const form = useForm({
You may also create a form instance without using `formOptions` by using the standalone `useForm` API:
```ts
-const form = useForm({
+const form = useForm({
onSubmit: async ({ value }) => {
// Do something with form data
console.log(value)
@@ -47,7 +47,7 @@ const form = useForm({
firstName: '',
lastName: '',
hobbies: [],
- },
+ } as Person,
})
```
diff --git a/docs/framework/vue/guides/validation.md b/docs/framework/vue/guides/validation.md
index beb3f7504..c0cf8928e 100644
--- a/docs/framework/vue/guides/validation.md
+++ b/docs/framework/vue/guides/validation.md
@@ -143,6 +143,26 @@ Or use the `errorMap` property to access the specific error you're looking for:
```
+It's worth mentioning that our `errors` array and the `errorMap` matches the types returned by the validators. This means that:
+
+```vue
+
+
+
+
+
+ The user is not old enough
+
+
+```
+
+
## Validation at field level vs at form level
As shown above, each `` accepts its own validation rules via the `onChange`, `onBlur` etc... callbacks. It is also possible to define validation rules at the form level (as opposed to field by field) by passing similar callbacks to the `useForm()` function.
diff --git a/docs/framework/vue/quick-start.md b/docs/framework/vue/quick-start.md
index 5b3648d85..5b719ddd2 100644
--- a/docs/framework/vue/quick-start.md
+++ b/docs/framework/vue/quick-start.md
@@ -3,12 +3,6 @@ id: quick-start
title: Quick Start
---
-> There is a bug in Vue's TypeScript support that's impacting our types that you'll likely run into:
->
-> https://github.com/vuejs/language-tools/issues/3782
->
-> Please give it a thumbs up, but _do not reply with comments such as "+1" or "When will this be fixed?", as such comments are unhelpful and rude_.
-
The bare minimum to get started with TanStack Form is to create a form and add a field. Keep in mind that this example does not include any validation or error handling... yet.
```vue
diff --git a/docs/framework/vue/reference/functions/usefield.md b/docs/framework/vue/reference/functions/usefield.md
index 2f06fddb5..00f2e0043 100644
--- a/docs/framework/vue/reference/functions/usefield.md
+++ b/docs/framework/vue/reference/functions/usefield.md
@@ -3,13 +3,15 @@ id: useField
title: useField
---
+
+
# Function: useField()
```ts
-function useField(opts): object
+function useField(opts): object
```
-Defined in: [packages/vue-form/src/useField.tsx:49](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useField.tsx#L49)
+Defined in: [packages/vue-form/src/useField.tsx:303](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useField.tsx#L303)
## Type Parameters
@@ -25,11 +27,41 @@ Defined in: [packages/vue-form/src/useField.tsx:49](https://github.com/TanStack/
• **TData** = `DeepValue`\<`TParentData`, `TName`\>
+• **TOnMountReturn** = `undefined`
+
+• **TOnChangeReturn** = `undefined`
+
+• **TOnChangeAsyncReturn** = `undefined`
+
+• **TOnBlurReturn** = `undefined`
+
+• **TOnBlurAsyncReturn** = `undefined`
+
+• **TOnSubmitReturn** = `undefined`
+
+• **TOnSubmitAsyncReturn** = `undefined`
+
+• **TFormOnMountReturn** = `undefined`
+
+• **TFormOnChangeReturn** = `undefined`
+
+• **TFormOnChangeAsyncReturn** = `undefined`
+
+• **TFormOnBlurReturn** = `undefined`
+
+• **TFormOnBlurAsyncReturn** = `undefined`
+
+• **TFormOnSubmitReturn** = `undefined`
+
+• **TFormOnSubmitAsyncReturn** = `undefined`
+
+• **TFormOnServerReturn** = `undefined`
+
## Parameters
### opts
-`UseFieldOptions`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\>
+`UseFieldOptions`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`, `TOnMountReturn`, `TOnChangeReturn`, `TOnChangeAsyncReturn`, `TOnBlurReturn`, `TOnBlurAsyncReturn`, `TOnSubmitReturn`, `TOnSubmitAsyncReturn`, `TFormOnMountReturn`, `TFormOnChangeReturn`, `TFormOnChangeAsyncReturn`, `TFormOnBlurReturn`, `TFormOnBlurAsyncReturn`, `TFormOnSubmitReturn`, `TFormOnSubmitAsyncReturn`, `TFormOnServerReturn`\>
## Returns
@@ -38,11 +70,11 @@ Defined in: [packages/vue-form/src/useField.tsx:49](https://github.com/TanStack/
### api
```ts
-readonly api: FieldApi & VueFieldApi = fieldApi;
+readonly api: FieldApi & VueFieldApi = fieldApi;
```
### state
```ts
-readonly state: Readonly, FieldState>> = fieldState;
+readonly state: Readonly, FieldState>> = fieldState;
```
diff --git a/docs/framework/vue/reference/functions/useform.md b/docs/framework/vue/reference/functions/useform.md
index 2d67b6719..83889c30b 100644
--- a/docs/framework/vue/reference/functions/useform.md
+++ b/docs/framework/vue/reference/functions/useform.md
@@ -3,13 +3,15 @@ id: useForm
title: useForm
---
+
+
# Function: useForm()
```ts
-function useForm(opts?): FormApi & VueFormApi
+function useForm(opts?): FormApi & VueFormApi
```
-Defined in: [packages/vue-form/src/useForm.tsx:30](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useForm.tsx#L30)
+Defined in: [packages/vue-form/src/useForm.tsx:190](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useForm.tsx#L190)
## Type Parameters
@@ -17,12 +19,28 @@ Defined in: [packages/vue-form/src/useForm.tsx:30](https://github.com/TanStack/f
• **TFormValidator** *extends* `undefined` \| `Validator`\<`TFormData`, `unknown`\> = `undefined`
+• **TFormOnMountReturn** = `undefined`
+
+• **TFormOnChangeReturn** = `undefined`
+
+• **TFormOnChangeAsyncReturn** = `undefined`
+
+• **TFormOnBlurReturn** = `undefined`
+
+• **TFormOnBlurAsyncReturn** = `undefined`
+
+• **TFormOnSubmitReturn** = `undefined`
+
+• **TFormOnSubmitAsyncReturn** = `undefined`
+
+• **TFormOnServerReturn** = `undefined`
+
## Parameters
### opts?
-`FormOptions`\<`TFormData`, `TFormValidator`\>
+`FormOptions`\<`TFormData`, `TFormValidator`, `TFormOnMountReturn`, `TFormOnChangeReturn`, `TFormOnChangeAsyncReturn`, `TFormOnBlurReturn`, `TFormOnBlurAsyncReturn`, `TFormOnSubmitReturn`, `TFormOnSubmitAsyncReturn`, `TFormOnServerReturn`\>
## Returns
-`FormApi`\<`TFormData`, `TFormValidator`\> & [`VueFormApi`](../interfaces/vueformapi.md)\<`TFormData`, `TFormValidator`\>
+`FormApi`\<`TFormData`, `TFormValidator`, `TFormOnMountReturn`, `TFormOnChangeReturn`, `TFormOnChangeAsyncReturn`, `TFormOnBlurReturn`, `TFormOnBlurAsyncReturn`, `TFormOnSubmitReturn`, `TFormOnSubmitAsyncReturn`, `TFormOnServerReturn`\> & [`VueFormApi`](../interfaces/vueformapi.md)\<`TFormData`, `TFormValidator`, `TFormOnMountReturn`, `TFormOnChangeReturn`, `TFormOnChangeAsyncReturn`, `TFormOnBlurReturn`, `TFormOnBlurAsyncReturn`, `TFormOnSubmitReturn`, `TFormOnSubmitAsyncReturn`, `TFormOnServerReturn`\>
diff --git a/docs/framework/vue/reference/functions/usestore.md b/docs/framework/vue/reference/functions/usestore.md
index 60c4f752a..e4d61b41c 100644
--- a/docs/framework/vue/reference/functions/usestore.md
+++ b/docs/framework/vue/reference/functions/usestore.md
@@ -3,6 +3,8 @@ id: useStore
title: useStore
---
+
+
# Function: useStore()
## Call Signature
@@ -11,7 +13,7 @@ title: useStore
function useStore(store, selector?): Readonly>
```
-Defined in: node\_modules/.pnpm/@tanstack+vue-store@0.7.0\_vue@3.5.12\_typescript@5.7.2\_/node\_modules/@tanstack/vue-store/dist/esm/index.d.ts:8
+Defined in: node\_modules/.pnpm/@tanstack+vue-store@0.7.0\_vue@3.5.13\_typescript@5.6.3\_/node\_modules/@tanstack/vue-store/dist/esm/index.d.ts:8
### Type Parameters
@@ -39,7 +41,7 @@ Defined in: node\_modules/.pnpm/@tanstack+vue-store@0.7.0\_vue@3.5.12\_typescrip
function useStore(store, selector?): Readonly>
```
-Defined in: node\_modules/.pnpm/@tanstack+vue-store@0.7.0\_vue@3.5.12\_typescript@5.7.2\_/node\_modules/@tanstack/vue-store/dist/esm/index.d.ts:9
+Defined in: node\_modules/.pnpm/@tanstack+vue-store@0.7.0\_vue@3.5.13\_typescript@5.6.3\_/node\_modules/@tanstack/vue-store/dist/esm/index.d.ts:9
### Type Parameters
diff --git a/docs/framework/vue/reference/index.md b/docs/framework/vue/reference/index.md
index 27abe16df..0ff69a5aa 100644
--- a/docs/framework/vue/reference/index.md
+++ b/docs/framework/vue/reference/index.md
@@ -3,6 +3,8 @@ id: "@tanstack/vue-form"
title: "@tanstack/vue-form"
---
+
+
# @tanstack/vue-form
## Interfaces
@@ -13,6 +15,7 @@ title: "@tanstack/vue-form"
## Type Aliases
- [FieldComponent](type-aliases/fieldcomponent.md)
+- [FieldComponentProps](type-aliases/fieldcomponentprops.md)
- [UseField](type-aliases/usefield.md)
## Variables
diff --git a/docs/framework/vue/reference/interfaces/vuefieldapi.md b/docs/framework/vue/reference/interfaces/vuefieldapi.md
index 5b638938c..0bbf21697 100644
--- a/docs/framework/vue/reference/interfaces/vuefieldapi.md
+++ b/docs/framework/vue/reference/interfaces/vuefieldapi.md
@@ -3,9 +3,11 @@ id: VueFieldApi
title: VueFieldApi
---
-# Interface: VueFieldApi\
+
-Defined in: [packages/vue-form/src/useField.tsx:8](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useField.tsx#L8)
+# Interface: VueFieldApi\
+
+Defined in: [packages/vue-form/src/useField.tsx:160](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useField.tsx#L160)
## Type Parameters
@@ -13,12 +15,28 @@ Defined in: [packages/vue-form/src/useField.tsx:8](https://github.com/TanStack/f
• **TFormValidator** *extends* `Validator`\<`TParentData`, `unknown`\> \| `undefined` = `undefined`
+• **TFormOnMountReturn** = `undefined`
+
+• **TFormOnChangeReturn** = `undefined`
+
+• **TFormOnChangeAsyncReturn** = `undefined`
+
+• **TFormOnBlurReturn** = `undefined`
+
+• **TFormOnBlurAsyncReturn** = `undefined`
+
+• **TFormOnSubmitReturn** = `undefined`
+
+• **TFormOnSubmitAsyncReturn** = `undefined`
+
+• **TFormOnServerReturn** = `undefined`
+
## Properties
### Field
```ts
-Field: FieldComponent;
+Field: FieldComponent;
```
-Defined in: [packages/vue-form/src/useField.tsx:14](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useField.tsx#L14)
+Defined in: [packages/vue-form/src/useField.tsx:174](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useField.tsx#L174)
diff --git a/docs/framework/vue/reference/interfaces/vueformapi.md b/docs/framework/vue/reference/interfaces/vueformapi.md
index 9cd097244..e110d2916 100644
--- a/docs/framework/vue/reference/interfaces/vueformapi.md
+++ b/docs/framework/vue/reference/interfaces/vueformapi.md
@@ -3,9 +3,11 @@ id: VueFormApi
title: VueFormApi
---
-# Interface: VueFormApi\
+
-Defined in: [packages/vue-form/src/useForm.tsx:10](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useForm.tsx#L10)
+# Interface: VueFormApi\
+
+Defined in: [packages/vue-form/src/useForm.tsx:110](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useForm.tsx#L110)
## Type Parameters
@@ -13,57 +15,51 @@ Defined in: [packages/vue-form/src/useForm.tsx:10](https://github.com/TanStack/f
• **TFormValidator** *extends* `Validator`\<`TFormData`, `unknown`\> \| `undefined` = `undefined`
-## Properties
+• **TFormOnMountReturn** = `undefined`
-### Field
+• **TFormOnChangeReturn** = `undefined`
-```ts
-Field: FieldComponent;
-```
+• **TFormOnChangeAsyncReturn** = `undefined`
-Defined in: [packages/vue-form/src/useForm.tsx:14](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useForm.tsx#L14)
+• **TFormOnBlurReturn** = `undefined`
-***
+• **TFormOnBlurAsyncReturn** = `undefined`
-### Subscribe()
+• **TFormOnSubmitReturn** = `undefined`
-```ts
-Subscribe: (props, context) => any;
-```
-
-Defined in: [packages/vue-form/src/useForm.tsx:19](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useForm.tsx#L19)
-
-#### Type Parameters
+• **TFormOnSubmitAsyncReturn** = `undefined`
-• **TSelected** = `FormState`\<`TFormData`\>
+• **TFormOnServerReturn** = `undefined`
-#### Parameters
+## Properties
-##### props
+### Field
-###### selector
+```ts
+Field: FieldComponent;
+```
-(`state`) => `TSelected`
+Defined in: [packages/vue-form/src/useForm.tsx:122](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useForm.tsx#L122)
-##### context
+***
-`SetupContext`\<`EmitsOptions`, `SlotsType`\<\{
- `default`: `FormState`\<`TFormData`\>;
- \}\>\>
+### Subscribe
-#### Returns
+```ts
+Subscribe: SubscribeComponent;
+```
-`any`
+Defined in: [packages/vue-form/src/useForm.tsx:177](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useForm.tsx#L177)
***
### useField
```ts
-useField: UseField;
+useField: UseField;
```
-Defined in: [packages/vue-form/src/useForm.tsx:15](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useForm.tsx#L15)
+Defined in: [packages/vue-form/src/useForm.tsx:134](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useForm.tsx#L134)
***
@@ -73,11 +69,11 @@ Defined in: [packages/vue-form/src/useForm.tsx:15](https://github.com/TanStack/f
useStore: (selector?) => Readonly>;
```
-Defined in: [packages/vue-form/src/useForm.tsx:16](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useForm.tsx#L16)
+Defined in: [packages/vue-form/src/useForm.tsx:146](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useForm.tsx#L146)
#### Type Parameters
-• **TSelected** = `FormState`\<`TFormData`\>
+• **TSelected** = `FormState`\<`TFormData`, `TFormOnMountReturn`, `TFormOnChangeReturn`, `TFormOnChangeAsyncReturn`, `TFormOnBlurReturn`, `TFormOnBlurAsyncReturn`, `TFormOnSubmitReturn`, `TFormOnSubmitAsyncReturn`, `TFormOnServerReturn`\>
#### Parameters
diff --git a/docs/framework/vue/reference/type-aliases/fieldcomponent.md b/docs/framework/vue/reference/type-aliases/fieldcomponent.md
index 15179546d..58cca2a70 100644
--- a/docs/framework/vue/reference/type-aliases/fieldcomponent.md
+++ b/docs/framework/vue/reference/type-aliases/fieldcomponent.md
@@ -3,13 +3,20 @@ id: FieldComponent
title: FieldComponent
---
-# Type Alias: FieldComponent()\
+
+
+# Type Alias: FieldComponent()\
```ts
-type FieldComponent = (fieldOptions, context) => any;
+type FieldComponent = (props) => CreateComponentPublicInstanceWithMixins, "form">, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, PublicProps, {}, false, {}, SlotsType<{
+ default: {
+ field: FieldApi;
+ state: FieldApi["state"];
+ };
+}>>;
```
-Defined in: [packages/vue-form/src/useField.tsx:117](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useField.tsx#L117)
+Defined in: [packages/vue-form/src/useField.tsx:17](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useField.tsx#L17)
## Type Parameters
@@ -17,31 +24,33 @@ Defined in: [packages/vue-form/src/useField.tsx:117](https://github.com/TanStack
• **TFormValidator** *extends* `Validator`\<`TParentData`, `unknown`\> \| `undefined` = `undefined`
-## Type Parameters
+• **TFormOnMountReturn** = `undefined`
+
+• **TFormOnChangeReturn** = `undefined`
+
+• **TFormOnChangeAsyncReturn** = `undefined`
+
+• **TFormOnBlurReturn** = `undefined`
-• **TName** *extends* `DeepKeys`\<`TParentData`\>
+• **TFormOnBlurAsyncReturn** = `undefined`
-• **TFieldValidator** *extends*
- \| `Validator`\<`DeepValue`\<`TParentData`, `TName`\>, `unknown`\>
- \| `undefined` = `undefined`
+• **TFormOnSubmitReturn** = `undefined`
-• **TData** *extends* `DeepValue`\<`TParentData`, `TName`\> = `DeepValue`\<`TParentData`, `TName`\>
+• **TFormOnSubmitAsyncReturn** = `undefined`
+
+• **TFormOnServerReturn** = `undefined`
## Parameters
-### fieldOptions
+### props
-`Omit`\<`FieldComponentProps`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\>, `"form"`\>
+`Omit`\<[`FieldComponentProps`](fieldcomponentprops.md)\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`, `TOnMountReturn`, `TOnChangeReturn`, `TOnChangeAsyncReturn`, `TOnBlurReturn`, `TOnBlurAsyncReturn`, `TOnSubmitReturn`, `TOnSubmitAsyncReturn`, `TFormOnMountReturn`, `TFormOnChangeReturn`, `TFormOnChangeAsyncReturn`, `TFormOnBlurReturn`, `TFormOnBlurAsyncReturn`, `TFormOnSubmitReturn`, `TFormOnSubmitAsyncReturn`, `TFormOnServerReturn`\>, `"form"`\> & `EmitsToProps`\<`EmitsOptions`\> & `PublicProps`
-### context
+## Returns
-`SetupContext`\<\{\}, `SlotsType`\<\{
+`CreateComponentPublicInstanceWithMixins`\<`Omit`\<[`FieldComponentProps`](fieldcomponentprops.md)\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`, `TOnMountReturn`, `TOnChangeReturn`, `TOnChangeAsyncReturn`, `TOnBlurReturn`, `TOnBlurAsyncReturn`, `TOnSubmitReturn`, `TOnSubmitAsyncReturn`, `TFormOnMountReturn`, `TFormOnChangeReturn`, `TFormOnChangeAsyncReturn`, `TFormOnBlurReturn`, `TFormOnBlurAsyncReturn`, `TFormOnSubmitReturn`, `TFormOnSubmitAsyncReturn`, `TFormOnServerReturn`\>, `"form"`\>, \{\}, \{\}, \{\}, \{\}, `ComponentOptionsMixin`, `ComponentOptionsMixin`, `EmitsOptions`, `PublicProps`, \{\}, `false`, \{\}, `SlotsType`\<\{
`default`: \{
- `field`: `FieldApi`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\>;
- `state`: `FieldApi`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\>\[`"state"`\];
+ `field`: `FieldApi`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`, `TOnMountReturn`, `TOnChangeReturn`, `TOnChangeAsyncReturn`, `TOnBlurReturn`, `TOnBlurAsyncReturn`, `TOnSubmitReturn`, `TOnSubmitAsyncReturn`, `TFormOnMountReturn`, `TFormOnChangeReturn`, `TFormOnChangeAsyncReturn`, `TFormOnBlurReturn`, `TFormOnBlurAsyncReturn`, `TFormOnSubmitReturn`, `TFormOnSubmitAsyncReturn`, `TFormOnServerReturn`\>;
+ `state`: `FieldApi`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`, `TOnMountReturn`, `TOnChangeReturn`, `TOnChangeAsyncReturn`, `TOnBlurReturn`, `TOnBlurAsyncReturn`, `TOnSubmitReturn`, `TOnSubmitAsyncReturn`, `TFormOnMountReturn`, `TFormOnChangeReturn`, `TFormOnChangeAsyncReturn`, `TFormOnBlurReturn`, `TFormOnBlurAsyncReturn`, `TFormOnSubmitReturn`, `TFormOnSubmitAsyncReturn`, `TFormOnServerReturn`\>\[`"state"`\];
\};
\}\>\>
-
-## Returns
-
-`any`
diff --git a/docs/framework/vue/reference/type-aliases/fieldcomponentprops.md b/docs/framework/vue/reference/type-aliases/fieldcomponentprops.md
new file mode 100644
index 000000000..7e54c8def
--- /dev/null
+++ b/docs/framework/vue/reference/type-aliases/fieldcomponentprops.md
@@ -0,0 +1,58 @@
+---
+id: FieldComponentProps
+title: FieldComponentProps
+---
+
+
+
+# Type Alias: FieldComponentProps\
+
+```ts
+type FieldComponentProps = UseFieldOptions;
+```
+
+Defined in: [packages/vue-form/src/useField.tsx:400](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useField.tsx#L400)
+
+## Type Parameters
+
+• **TParentData**
+
+• **TName** *extends* `DeepKeys`\<`TParentData`\>
+
+• **TFieldValidator** *extends*
+ \| `Validator`\<`DeepValue`\<`TParentData`, `TName`\>, `unknown`\>
+ \| `undefined` = `undefined`
+
+• **TFormValidator** *extends* `Validator`\<`TParentData`, `unknown`\> \| `undefined` = `undefined`
+
+• **TData** *extends* `DeepValue`\<`TParentData`, `TName`\> = `DeepValue`\<`TParentData`, `TName`\>
+
+• **TOnMountReturn** = `undefined`
+
+• **TOnChangeReturn** = `undefined`
+
+• **TOnChangeAsyncReturn** = `undefined`
+
+• **TOnBlurReturn** = `undefined`
+
+• **TOnBlurAsyncReturn** = `undefined`
+
+• **TOnSubmitReturn** = `undefined`
+
+• **TOnSubmitAsyncReturn** = `undefined`
+
+• **TFormOnMountReturn** = `undefined`
+
+• **TFormOnChangeReturn** = `undefined`
+
+• **TFormOnChangeAsyncReturn** = `undefined`
+
+• **TFormOnBlurReturn** = `undefined`
+
+• **TFormOnBlurAsyncReturn** = `undefined`
+
+• **TFormOnSubmitReturn** = `undefined`
+
+• **TFormOnSubmitAsyncReturn** = `undefined`
+
+• **TFormOnServerReturn** = `undefined`
diff --git a/docs/framework/vue/reference/type-aliases/usefield.md b/docs/framework/vue/reference/type-aliases/usefield.md
index 5fb33846e..68ed46b3c 100644
--- a/docs/framework/vue/reference/type-aliases/usefield.md
+++ b/docs/framework/vue/reference/type-aliases/usefield.md
@@ -3,13 +3,15 @@ id: UseField
title: UseField
---
-# Type Alias: UseField()\
+
+
+# Type Alias: UseField()\
```ts
-type UseField = (opts) => object;
+type UseField = (opts) => object;
```
-Defined in: [packages/vue-form/src/useField.tsx:17](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useField.tsx#L17)
+Defined in: [packages/vue-form/src/useField.tsx:188](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useField.tsx#L188)
## Type Parameters
@@ -17,6 +19,22 @@ Defined in: [packages/vue-form/src/useField.tsx:17](https://github.com/TanStack/
• **TFormValidator** *extends* `Validator`\<`TParentData`, `unknown`\> \| `undefined` = `undefined`
+• **TFormOnMountReturn** = `undefined`
+
+• **TFormOnChangeReturn** = `undefined`
+
+• **TFormOnChangeAsyncReturn** = `undefined`
+
+• **TFormOnBlurReturn** = `undefined`
+
+• **TFormOnBlurAsyncReturn** = `undefined`
+
+• **TFormOnSubmitReturn** = `undefined`
+
+• **TFormOnSubmitAsyncReturn** = `undefined`
+
+• **TFormOnServerReturn** = `undefined`
+
## Type Parameters
• **TName** *extends* `DeepKeys`\<`TParentData`\>
@@ -27,11 +45,25 @@ Defined in: [packages/vue-form/src/useField.tsx:17](https://github.com/TanStack/
• **TData** *extends* `DeepValue`\<`TParentData`, `TName`\> = `DeepValue`\<`TParentData`, `TName`\>
+• **TOnMountReturn** = `undefined`
+
+• **TOnChangeReturn** = `undefined`
+
+• **TOnChangeAsyncReturn** = `undefined`
+
+• **TOnBlurReturn** = `undefined`
+
+• **TOnBlurAsyncReturn** = `undefined`
+
+• **TOnSubmitReturn** = `undefined`
+
+• **TOnSubmitAsyncReturn** = `undefined`
+
## Parameters
### opts
-`Omit`\<`UseFieldOptions`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\>, `"form"`\>
+`Omit`\<`UseFieldOptions`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`, `TOnMountReturn`, `TOnChangeReturn`, `TOnChangeAsyncReturn`, `TOnBlurReturn`, `TOnBlurAsyncReturn`, `TOnSubmitReturn`, `TOnSubmitAsyncReturn`, `TFormOnMountReturn`, `TFormOnChangeReturn`, `TFormOnChangeAsyncReturn`, `TFormOnBlurReturn`, `TFormOnBlurAsyncReturn`, `TFormOnSubmitReturn`, `TFormOnSubmitAsyncReturn`, `TFormOnServerReturn`\>, `"form"`\>
## Returns
@@ -40,11 +72,11 @@ Defined in: [packages/vue-form/src/useField.tsx:17](https://github.com/TanStack/
### api
```ts
-api: FieldApi & VueFieldApi;
+api: FieldApi & VueFieldApi;
```
### state
```ts
-state: Readonly["state"]>>;
+state: Readonly["state"]>>;
```
diff --git a/docs/framework/vue/reference/variables/field.md b/docs/framework/vue/reference/variables/field.md
index 8b9c3092d..321506be8 100644
--- a/docs/framework/vue/reference/variables/field.md
+++ b/docs/framework/vue/reference/variables/field.md
@@ -3,20 +3,22 @@ id: Field
title: Field
---
+
+
# Variable: Field()
```ts
-const Field: (props) => CreateComponentPublicInstanceWithMixins & object & {} | {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, PublicProps, {}, false, {}, {}, {}, {}, string, {}, any, ComponentProvideOptions, OptionTypesType<{}, {}, {}, {}, {}, {}>, object & FieldApiOptions & { mode?: "value" | ... 1 more ... | undefined; } & ({ ...; } | { ...; }), {}, {}, {}, {}, {}>;
+const Field: (props) => CreateComponentPublicInstanceWithMixins & object & {} | {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, PublicProps, {}, false, {}, {}, {}, {}, string, {}, any, ComponentProvideOptions, OptionTypesType<{}, {}, {}, {}, {}, {}>, object & FieldApiOptions & { ...; } & ({ ...; } | { ...; }), {}, {}, {}, {}, {}>;
```
-Defined in: [packages/vue-form/src/useField.tsx:162](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useField.tsx#L162)
+Defined in: [packages/vue-form/src/useField.tsx:448](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useField.tsx#L448)
## Parameters
### props
-FieldApiOptions\ & \{ mode?: "value" \| ... 1 more ... \| undefined; \} & (\{ ...; \} \| \{ ...; \}) & `VNodeProps` & `AllowedComponentProps` & `ComponentCustomProps`
+FieldApiOptions\ & \{ ...; \} & (\{ ...; \} \| \{ ...; \}) & `VNodeProps` & `AllowedComponentProps` & `ComponentCustomProps`
## Returns
-`CreateComponentPublicInstanceWithMixins`\<`FieldApiOptions`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\> & `object` & \{\} \| \{\}, \{\}, \{\}, \{\}, \{\}, `ComponentOptionsMixin`, `ComponentOptionsMixin`, `EmitsOptions`, `PublicProps`, \{\}, `false`, \{\}, \{\}, \{\}, \{\}, `string`, \{\}, `any`, `ComponentProvideOptions`, `OptionTypesType`\<\{\}, \{\}, \{\}, \{\}, \{\}, \{\}\>, `object` & FieldApiOptions\ & \{ mode?: "value" \| ... 1 more ... \| undefined; \} & (\{ ...; \} \| \{ ...; \}), \{\}, \{\}, \{\}, \{\}, \{\}\>
+`CreateComponentPublicInstanceWithMixins`\<`FieldApiOptions`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`, `TOnMountReturn`, `TOnChangeReturn`, `TOnChangeAsyncReturn`, `TOnBlurReturn`, `TOnBlurAsyncReturn`, `TOnSubmitReturn`, `TOnSubmitAsyncReturn`, `TFormOnMountReturn`, `TFormOnChangeReturn`, `TFormOnChangeAsyncReturn`, `TFormOnBlurReturn`, `TFormOnBlurAsyncReturn`, `TFormOnSubmitReturn`, `TFormOnSubmitAsyncReturn`, `TFormOnServerReturn`\> & `object` & \{\} \| \{\}, \{\}, \{\}, \{\}, \{\}, `ComponentOptionsMixin`, `ComponentOptionsMixin`, `EmitsOptions`, `PublicProps`, \{\}, `false`, \{\}, \{\}, \{\}, \{\}, `string`, \{\}, `any`, `ComponentProvideOptions`, `OptionTypesType`\<\{\}, \{\}, \{\}, \{\}, \{\}, \{\}\>, `object` & FieldApiOptions\ & \{ ...; \} & (\{ ...; \} \| \{ ...; \}), \{\}, \{\}, \{\}, \{\}, \{\}\>
diff --git a/docs/overview.md b/docs/overview.md
index a0506af9d..a5620be86 100644
--- a/docs/overview.md
+++ b/docs/overview.md
@@ -33,9 +33,9 @@ In the example below, you can see TanStack Form in action with the React framewo
import * as React from 'react'
import { createRoot } from 'react-dom/client'
import { useForm } from '@tanstack/react-form'
-import type { FieldApi } from '@tanstack/react-form'
+import type { AnyFieldApi } from '@tanstack/react-form'
-function FieldInfo({ field }: { field: FieldApi }) {
+function FieldInfo({ field }: { field: AnyFieldApi }) {
return (
<>
{field.state.meta.isTouched && field.state.meta.errors.length ? (
diff --git a/docs/reference/classes/fieldapi.md b/docs/reference/classes/fieldapi.md
index 5821b91af..6e5231f87 100644
--- a/docs/reference/classes/fieldapi.md
+++ b/docs/reference/classes/fieldapi.md
@@ -3,9 +3,11 @@ id: FieldApi
title: FieldApi
---
-# Class: FieldApi\
+
-Defined in: [packages/form-core/src/FieldApi.ts:427](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L427)
+# Class: FieldApi\
+
+Defined in: [packages/form-core/src/FieldApi.ts:685](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L685)
A class representing the API for managing a form field.
@@ -29,15 +31,45 @@ the `new FieldApi` constructor.
• **TData** *extends* [`DeepValue`](../type-aliases/deepvalue.md)\<`TParentData`, `TName`\> = [`DeepValue`](../type-aliases/deepvalue.md)\<`TParentData`, `TName`\>
+• **TOnMountReturn** = `undefined`
+
+• **TOnChangeReturn** = `undefined`
+
+• **TOnChangeAsyncReturn** = `undefined`
+
+• **TOnBlurReturn** = `undefined`
+
+• **TOnBlurAsyncReturn** = `undefined`
+
+• **TOnSubmitReturn** = `undefined`
+
+• **TOnSubmitAsyncReturn** = `undefined`
+
+• **TFormOnMountReturn** = `undefined`
+
+• **TFormOnChangeReturn** = `undefined`
+
+• **TFormOnChangeAsyncReturn** = `undefined`
+
+• **TFormOnBlurReturn** = `undefined`
+
+• **TFormOnBlurAsyncReturn** = `undefined`
+
+• **TFormOnSubmitReturn** = `undefined`
+
+• **TFormOnSubmitAsyncReturn** = `undefined`
+
+• **TFormOnServerReturn** = `undefined`
+
## Constructors
### new FieldApi()
```ts
-new FieldApi(opts): FieldApi
+new FieldApi(opts): FieldApi
```
-Defined in: [packages/form-core/src/FieldApi.ts:477](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L477)
+Defined in: [packages/form-core/src/FieldApi.ts:790](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L790)
Initializes a new `FieldApi` instance.
@@ -45,21 +77,21 @@ Initializes a new `FieldApi` instance.
##### opts
-[`FieldApiOptions`](../interfaces/fieldapioptions.md)\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\>
+[`FieldApiOptions`](../interfaces/fieldapioptions.md)\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`, `TOnMountReturn`, `TOnChangeReturn`, `TOnChangeAsyncReturn`, `TOnBlurReturn`, `TOnBlurAsyncReturn`, `TOnSubmitReturn`, `TOnSubmitAsyncReturn`, `TFormOnMountReturn`, `TFormOnChangeReturn`, `TFormOnChangeAsyncReturn`, `TFormOnBlurReturn`, `TFormOnBlurAsyncReturn`, `TFormOnSubmitReturn`, `TFormOnSubmitAsyncReturn`, `TFormOnServerReturn`\>
#### Returns
-[`FieldApi`](fieldapi.md)\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\>
+[`FieldApi`](fieldapi.md)\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`, `TOnMountReturn`, `TOnChangeReturn`, `TOnChangeAsyncReturn`, `TOnBlurReturn`, `TOnBlurAsyncReturn`, `TOnSubmitReturn`, `TOnSubmitAsyncReturn`, `TFormOnMountReturn`, `TFormOnChangeReturn`, `TFormOnChangeAsyncReturn`, `TFormOnBlurReturn`, `TFormOnBlurAsyncReturn`, `TFormOnSubmitReturn`, `TFormOnSubmitAsyncReturn`, `TFormOnServerReturn`\>
## Properties
### form
```ts
-form: FormApi;
+form: FormApi;
```
-Defined in: [packages/form-core/src/FieldApi.ts:441](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L441)
+Defined in: [packages/form-core/src/FieldApi.ts:714](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L714)
A reference to the form API instance.
@@ -71,7 +103,7 @@ A reference to the form API instance.
name: unknown extends TParentData ? string : TParentData extends readonly any[] & IsTuple ? PrefixTupleAccessor, AllowedIndexes, never>, []> : TParentData extends any[] ? PrefixArrayAccessor, [any]> : TParentData extends Date ? never : TParentData extends object ? PrefixObjectAccessor, []> : TParentData extends string | number | bigint | boolean ? "" : never;
```
-Defined in: [packages/form-core/src/FieldApi.ts:451](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L451)
+Defined in: [packages/form-core/src/FieldApi.ts:739](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L739)
The field name.
@@ -80,10 +112,10 @@ The field name.
### options
```ts
-options: FieldApiOptions;
+options: FieldApiOptions;
```
-Defined in: [packages/form-core/src/FieldApi.ts:455](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L455)
+Defined in: [packages/form-core/src/FieldApi.ts:743](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L743)
The field options.
@@ -92,10 +124,10 @@ The field options.
### store
```ts
-store: Derived>;
+store: Derived>;
```
-Defined in: [packages/form-core/src/FieldApi.ts:465](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L465)
+Defined in: [packages/form-core/src/FieldApi.ts:767](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L767)
The field state store.
@@ -107,7 +139,7 @@ The field state store.
timeoutIds: Record;
```
-Defined in: [packages/form-core/src/FieldApi.ts:472](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L472)
+Defined in: [packages/form-core/src/FieldApi.ts:785](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L785)
## Accessors
@@ -116,16 +148,16 @@ Defined in: [packages/form-core/src/FieldApi.ts:472](https://github.com/TanStack
#### Get Signature
```ts
-get state(): FieldState
+get state(): FieldState
```
-Defined in: [packages/form-core/src/FieldApi.ts:469](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L469)
+Defined in: [packages/form-core/src/FieldApi.ts:782](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L782)
The current field state.
##### Returns
-[`FieldState`](../type-aliases/fieldstate.md)\<`TData`\>
+[`FieldState`](../type-aliases/fieldstate.md)\<`TData`, `TOnMountReturn`, `TOnChangeReturn`, `TOnChangeAsyncReturn`, `TOnBlurReturn`, `TOnBlurAsyncReturn`, `TOnSubmitReturn`, `TOnSubmitAsyncReturn`\>
## Methods
@@ -135,7 +167,7 @@ The current field state.
getInfo(): FieldInfo
```
-Defined in: [packages/form-core/src/FieldApi.ts:673](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L673)
+Defined in: [packages/form-core/src/FieldApi.ts:1040](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1040)
Gets the field information object.
@@ -148,14 +180,14 @@ Gets the field information object.
### getMeta()
```ts
-getMeta(): FieldMeta
+getMeta(): FieldMeta
```
-Defined in: [packages/form-core/src/FieldApi.ts:662](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L662)
+Defined in: [packages/form-core/src/FieldApi.ts:1018](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1018)
#### Returns
-[`FieldMeta`](../type-aliases/fieldmeta.md)
+[`FieldMeta`](../type-aliases/fieldmeta.md)\<`TOnMountReturn`, `TOnChangeReturn`, `TOnChangeAsyncReturn`, `TOnBlurReturn`, `TOnBlurAsyncReturn`, `TOnSubmitReturn`, `TOnSubmitAsyncReturn`\>
***
@@ -165,7 +197,7 @@ Defined in: [packages/form-core/src/FieldApi.ts:662](https://github.com/TanStack
getValue(): TData
```
-Defined in: [packages/form-core/src/FieldApi.ts:644](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L644)
+Defined in: [packages/form-core/src/FieldApi.ts:1000](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1000)
Gets the current field value.
@@ -185,7 +217,7 @@ Use `field.state.value` instead.
handleBlur(): void
```
-Defined in: [packages/form-core/src/FieldApi.ts:1025](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1025)
+Defined in: [packages/form-core/src/FieldApi.ts:1447](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1447)
Handles the blur event.
@@ -201,7 +233,7 @@ Handles the blur event.
handleChange(updater): void
```
-Defined in: [packages/form-core/src/FieldApi.ts:1018](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1018)
+Defined in: [packages/form-core/src/FieldApi.ts:1440](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1440)
Handles the change event.
@@ -226,7 +258,7 @@ insertValue(
opts?): Promise
```
-Defined in: [packages/form-core/src/FieldApi.ts:686](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L686)
+Defined in: [packages/form-core/src/FieldApi.ts:1053](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1053)
Inserts a value at the specified index, shifting the subsequent values to the right.
@@ -256,7 +288,7 @@ Inserts a value at the specified index, shifting the subsequent values to the ri
mount(): () => void
```
-Defined in: [packages/form-core/src/FieldApi.ts:567](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L567)
+Defined in: [packages/form-core/src/FieldApi.ts:905](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L905)
Mounts the field instance to the form.
@@ -279,7 +311,7 @@ moveValue(
opts?): void
```
-Defined in: [packages/form-core/src/FieldApi.ts:716](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L716)
+Defined in: [packages/form-core/src/FieldApi.ts:1083](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1083)
Moves the value at the first specified index to the second specified index.
@@ -309,7 +341,7 @@ Moves the value at the first specified index to the second specified index.
pushValue(value, opts?): void
```
-Defined in: [packages/form-core/src/FieldApi.ts:678](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L678)
+Defined in: [packages/form-core/src/FieldApi.ts:1045](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1045)
Pushes a new value to the field.
@@ -335,7 +367,7 @@ Pushes a new value to the field.
removeValue(index, opts?): Promise
```
-Defined in: [packages/form-core/src/FieldApi.ts:704](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L704)
+Defined in: [packages/form-core/src/FieldApi.ts:1071](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1071)
Removes a value at the specified index.
@@ -364,7 +396,7 @@ replaceValue(
opts?): Promise
```
-Defined in: [packages/form-core/src/FieldApi.ts:695](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L695)
+Defined in: [packages/form-core/src/FieldApi.ts:1062](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1062)
Replaces a value at the specified index.
@@ -394,7 +426,7 @@ Replaces a value at the specified index.
setErrorMap(errorMap): void
```
-Defined in: [packages/form-core/src/FieldApi.ts:1045](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1045)
+Defined in: [packages/form-core/src/FieldApi.ts:1467](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1467)
Updates the field's errorMap
@@ -416,7 +448,7 @@ Updates the field's errorMap
setMeta(updater): void
```
-Defined in: [packages/form-core/src/FieldApi.ts:667](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L667)
+Defined in: [packages/form-core/src/FieldApi.ts:1023](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1023)
Sets the field metadata.
@@ -424,7 +456,7 @@ Sets the field metadata.
##### updater
-[`Updater`](../type-aliases/updater.md)\<[`FieldMeta`](../type-aliases/fieldmeta.md)\>
+[`Updater`](../type-aliases/updater.md)\<[`FieldMeta`](../type-aliases/fieldmeta.md)\<`TOnMountReturn`, `TOnChangeReturn`, `TOnChangeAsyncReturn`, `TOnBlurReturn`, `TOnBlurAsyncReturn`, `TOnSubmitReturn`, `TOnSubmitAsyncReturn`\>\>
#### Returns
@@ -438,7 +470,7 @@ Sets the field metadata.
setValue(updater, options?): void
```
-Defined in: [packages/form-core/src/FieldApi.ts:651](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L651)
+Defined in: [packages/form-core/src/FieldApi.ts:1007](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1007)
Sets the field value and run the `change` validator.
@@ -467,7 +499,7 @@ swapValues(
opts?): void
```
-Defined in: [packages/form-core/src/FieldApi.ts:710](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L710)
+Defined in: [packages/form-core/src/FieldApi.ts:1077](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1077)
Swaps the values at the specified indices.
@@ -497,7 +529,7 @@ Swaps the values at the specified indices.
update(opts): void
```
-Defined in: [packages/form-core/src/FieldApi.ts:606](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L606)
+Defined in: [packages/form-core/src/FieldApi.ts:947](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L947)
Updates the field instance with new options.
@@ -505,7 +537,7 @@ Updates the field instance with new options.
##### opts
-[`FieldApiOptions`](../interfaces/fieldapioptions.md)\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\>
+[`FieldApiOptions`](../interfaces/fieldapioptions.md)\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`, `TOnMountReturn`, `TOnChangeReturn`, `TOnChangeAsyncReturn`, `TOnBlurReturn`, `TOnBlurAsyncReturn`, `TOnSubmitReturn`, `TOnSubmitAsyncReturn`, `TFormOnMountReturn`, `TFormOnChangeReturn`, `TFormOnChangeAsyncReturn`, `TFormOnBlurReturn`, `TFormOnBlurAsyncReturn`, `TFormOnSubmitReturn`, `TFormOnSubmitAsyncReturn`, `TFormOnServerReturn`\>
#### Returns
@@ -516,12 +548,10 @@ Updates the field instance with new options.
### validate()
```ts
-validate(cause):
- | ValidationError[]
-| Promise
+validate(cause): unknown[] | Promise
```
-Defined in: [packages/form-core/src/FieldApi.ts:990](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L990)
+Defined in: [packages/form-core/src/FieldApi.ts:1412](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1412)
Validates the field value.
@@ -533,5 +563,4 @@ Validates the field value.
#### Returns
- \| [`ValidationError`](../type-aliases/validationerror.md)[]
- \| `Promise`\<[`ValidationError`](../type-aliases/validationerror.md)[]\>
+`unknown`[] \| `Promise`\<`unknown`[]\>
diff --git a/docs/reference/classes/formapi.md b/docs/reference/classes/formapi.md
index e242bf9df..d049b901c 100644
--- a/docs/reference/classes/formapi.md
+++ b/docs/reference/classes/formapi.md
@@ -3,9 +3,11 @@ id: FormApi
title: FormApi
---
-# Class: FormApi\
+
-Defined in: [packages/form-core/src/FormApi.ts:360](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L360)
+# Class: FormApi\
+
+Defined in: [packages/form-core/src/FormApi.ts:634](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L634)
A class representing the Form API. It handles the logic and interactions with the form state.
@@ -19,15 +21,31 @@ However, if you need to create a new instance manually, you can do so by calling
• **TFormValidator** *extends* `Validator`\<`TFormData`, `unknown`\> \| `undefined` = `undefined`
+• **TOnMountReturn** = `undefined`
+
+• **TOnChangeReturn** = `undefined`
+
+• **TOnChangeAsyncReturn** = `undefined`
+
+• **TOnBlurReturn** = `undefined`
+
+• **TOnBlurAsyncReturn** = `undefined`
+
+• **TOnSubmitReturn** = `undefined`
+
+• **TOnSubmitAsyncReturn** = `undefined`
+
+• **TOnServerReturn** = `undefined`
+
## Constructors
### new FormApi()
```ts
-new FormApi(opts?): FormApi
+new FormApi(opts?): FormApi
```
-Defined in: [packages/form-core/src/FormApi.ts:389](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L389)
+Defined in: [packages/form-core/src/FormApi.ts:706](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L706)
Constructs a new `FormApi` instance with the given form options.
@@ -35,21 +53,21 @@ Constructs a new `FormApi` instance with the given form options.
##### opts?
-[`FormOptions`](../interfaces/formoptions.md)\<`TFormData`, `TFormValidator`\>
+[`FormOptions`](../interfaces/formoptions.md)\<`TFormData`, `TFormValidator`, `TOnMountReturn`, `TOnChangeReturn`, `TOnChangeAsyncReturn`, `TOnBlurReturn`, `TOnBlurAsyncReturn`, `TOnSubmitReturn`, `TOnSubmitAsyncReturn`, `TOnServerReturn`\>
#### Returns
-[`FormApi`](formapi.md)\<`TFormData`, `TFormValidator`\>
+[`FormApi`](formapi.md)\<`TFormData`, `TFormValidator`, `TOnMountReturn`, `TOnChangeReturn`, `TOnChangeAsyncReturn`, `TOnBlurReturn`, `TOnBlurAsyncReturn`, `TOnSubmitReturn`, `TOnSubmitAsyncReturn`, `TOnServerReturn`\>
## Properties
### baseStore
```ts
-baseStore: Store, (cb) => BaseFormState>;
+baseStore: Store, (cb) => BaseFormState>;
```
-Defined in: [packages/form-core/src/FormApi.ts:368](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L368)
+Defined in: [packages/form-core/src/FormApi.ts:661](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L661)
***
@@ -59,7 +77,7 @@ Defined in: [packages/form-core/src/FormApi.ts:368](https://github.com/TanStack/
fieldInfo: Record ? PrefixTupleAccessor, AllowedIndexes, never>, []> : TFormData extends any[] ? PrefixArrayAccessor, [any]> : TFormData extends Date ? never : TFormData extends object ? PrefixObjectAccessor, []> : TFormData extends string | number | bigint | boolean ? "" : never, FieldInfo>;
```
-Defined in: [packages/form-core/src/FormApi.ts:374](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L374)
+Defined in: [packages/form-core/src/FormApi.ts:691](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L691)
A record of field information for each field in the form.
@@ -71,17 +89,17 @@ A record of field information for each field in the form.
fieldMetaDerived: Derived ? PrefixTupleAccessor, AllowedIndexes, never>, []> : TFormData extends any[] ? PrefixArrayAccessor, [any]> : TFormData extends Date ? never : TFormData extends object ? PrefixObjectAccessor, []> : TFormData extends string | number | bigint | boolean ? "" : never, FieldMeta>>;
```
-Defined in: [packages/form-core/src/FormApi.ts:369](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L369)
+Defined in: [packages/form-core/src/FormApi.ts:674](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L674)
***
### options
```ts
-options: FormOptions = {};
+options: FormOptions = {};
```
-Defined in: [packages/form-core/src/FormApi.ts:367](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L367)
+Defined in: [packages/form-core/src/FormApi.ts:649](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L649)
The options for the form.
@@ -90,10 +108,10 @@ The options for the form.
### store
```ts
-store: Derived>;
+store: Derived>;
```
-Defined in: [packages/form-core/src/FormApi.ts:370](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L370)
+Defined in: [packages/form-core/src/FormApi.ts:675](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L675)
## Accessors
@@ -102,14 +120,14 @@ Defined in: [packages/form-core/src/FormApi.ts:370](https://github.com/TanStack/
#### Get Signature
```ts
-get state(): FormState