Merge branch 'main' of https://github.com/tobySolutions/form

.github/workflows/autofix.yml

@@ -18,12 +18,14 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v4.2.1
       - name: Setup Tools
-        uses: tanstack/config/.github/setup@1ce18c19ec31f6191db71f4b768b6b9ec3575a0e
+        uses: tanstack/config/.github/setup@main
       - name: Fix formatting
         run: pnpm prettier:write
+      - name: Generate Docs
+        run: pnpm docs:generate
       - name: Apply fixes
         uses: autofix-ci/action@ff86a557419858bb967097bfc916833f5647fa8c
         with:
-          commit-message: 'ci: apply automated fixes'
+          commit-message: 'ci: apply automated fixes and generate docs'

docs/config.json

@@ -220,11 +220,26 @@
     {
       "label": "API Reference",
       "children": [
-        { "label": "JavaScript Reference", "to": "reference/index" },
-        { "label": "Classes / FieldApi", "to": "reference/classes/fieldapi" },
-        { "label": "Classes / FormApi", "to": "reference/classes/formapi" },
-        { "label": "Functions / formOptions", "to": "reference/functions/formoptions" },
-        { "label": "Functions / mergeForm", "to": "reference/functions/mergeform" },
+        {
+          "label": "JavaScript Reference",
+          "to": "reference/index"
+        },
+        {
+          "label": "Classes / FieldApi",
+          "to": "reference/classes/fieldapi"
+        },
+        {
+          "label": "Classes / FormApi",
+          "to": "reference/classes/formapi"
+        },
+        {
+          "label": "Functions / formOptions",
+          "to": "reference/functions/formoptions"
+        },
+        {
+          "label": "Functions / mergeForm",
+          "to": "reference/functions/mergeform"
+        },
         {
           "label": "Interfaces / FieldApiOptions",
           "to": "reference/interfaces/fieldapioptions"
@@ -237,24 +252,54 @@
           "label": "Interfaces / FieldValidators",
           "to": "reference/interfaces/fieldvalidators"
         },
-        { "label": "Interfaces / FormOptions", "to": "reference/interfaces/formoptions" },
+        {
+          "label": "Interfaces / FormOptions",
+          "to": "reference/interfaces/formoptions"
+        },
         {
           "label": "Interfaces / FormValidators",
           "to": "reference/interfaces/formvalidators"
         },
-        { "label": "Types / DeepKeys", "to": "reference/type-aliases/deepkeys" },
-        { "label": "Types / DeepValue", "to": "reference/type-aliases/deepvalue" },
-        { "label": "Types / FieldInfo", "to": "reference/type-aliases/fieldinfo" },
-        { "label": "Types / FieldMeta", "to": "reference/type-aliases/fieldmeta" },
-        { "label": "Types / FieldState", "to": "reference/type-aliases/fieldstate" },
-        { "label": "Types / FormState", "to": "reference/type-aliases/formstate" },
-        { "label": "Types / Updater", "to": "reference/type-aliases/updater" },
-        { "label": "Types / UpdaterFn", "to": "reference/type-aliases/updaterfn" },
+        {
+          "label": "Types / DeepKeys",
+          "to": "reference/type-aliases/deepkeys"
+        },
+        {
+          "label": "Types / DeepValue",
+          "to": "reference/type-aliases/deepvalue"
+        },
+        {
+          "label": "Types / FieldInfo",
+          "to": "reference/type-aliases/fieldinfo"
+        },
+        {
+          "label": "Types / FieldMeta",
+          "to": "reference/type-aliases/fieldmeta"
+        },
+        {
+          "label": "Types / FieldState",
+          "to": "reference/type-aliases/fieldstate"
+        },
+        {
+          "label": "Types / FormState",
+          "to": "reference/type-aliases/formstate"
+        },
+        {
+          "label": "Types / Updater",
+          "to": "reference/type-aliases/updater"
+        },
+        {
+          "label": "Types / UpdaterFn",
+          "to": "reference/type-aliases/updaterfn"
+        },
         {
           "label": "Types / ValidationError",
           "to": "reference/type-aliases/validationerror"
         },
-        { "label": "Types / ValidationMeta", "to": "reference/type-aliases/validationmeta" }
+        {
+          "label": "Types / ValidationMeta",
+          "to": "reference/type-aliases/validationmeta"
+        }
       ],
       "frameworks": [
         {
@@ -297,7 +342,10 @@
         {
           "label": "vue",
           "children": [
-            { "label": "Vue Reference", "to": "framework/vue/reference/index" },
+            {
+              "label": "Vue Reference",
+              "to": "framework/vue/reference/index"
+            },
             {
               "label": "Functions / Field",
               "to": "framework/vue/reference/functions/field"
@@ -352,7 +400,10 @@
         {
           "label": "lit",
           "children": [
-            { "label": "Lit Reference", "to": "framework/lit/reference/index" },
+            {
+              "label": "Lit Reference",
+              "to": "framework/lit/reference/index"
+            },
             {
               "label": "Classes / TanStackFormController",
               "to": "framework/lit/reference/tanstackformcontroller"
@@ -424,6 +475,10 @@
             {
               "label": "UI Libraries",
               "to": "framework/react/examples/ui-libraries"
+            },
+            {
+              "label": "Field Errors From Form Validators",
+              "to": "framework/react/examples/field-errors-from-form-validators"
             }
           ]
         },

docs/framework/angular/guides/validation.md

@@ -469,6 +469,38 @@ export class AppComponent {
 }
 ```
 
+### Form Level Adapter Validation
+
+You can also use the adapter at the form level:
+
+```typescript
+import { zodValidator } from '@tanstack/zod-form-adapter'
+import { z } from 'zod'
+
+// ...
+
+const form = injectForm({
+  validatorAdapter: zodValidator(),
+  validators: {
+    onChange: z.object({
+      age: z.number().gte(13, 'You must be 13 to make an account'),
+    }),
+  },
+})
+```
+
+If you use the adapter at the form level, it will pass the validation to the fields of the same name.
+
+This means that:
+
+```html
+<ng-container [tanstackField]="form" name="age" #age="field">
+  <!-- ... -->
+</ng-container>
+```
+
+Will still display the error message from the form-level validation.
+
 ## Preventing invalid forms from being submitted
 
 The `onChange`, `onBlur` etc... callbacks are also run when the form is submitted and the submission is blocked if the form is invalid.

docs/framework/angular/reference/classes/tanstackfield.md

@@ -46,7 +46,7 @@ api: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>;
 
 #### Defined in
 
-[tanstack-field.directive.ts:61](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/angular-form/src/tanstack-field.directive.ts#L61)
+[tanstack-field.directive.ts:58](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L58)
 
 ***
 
@@ -64,7 +64,7 @@ If `true`, always run async validation, even if there are errors emitted during
 
 #### Defined in
 
-[tanstack-field.directive.ts:50](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/angular-form/src/tanstack-field.directive.ts#L50)
+[tanstack-field.directive.ts:47](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L47)
 
 ***
 
@@ -82,7 +82,7 @@ The default time to debounce async validation if there is not a more specific de
 
 #### Defined in
 
-[tanstack-field.directive.ts:49](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/angular-form/src/tanstack-field.directive.ts#L49)
+[tanstack-field.directive.ts:46](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L46)
 
 ***
 
@@ -100,7 +100,7 @@ An optional object with default metadata for the field.
 
 #### Defined in
 
-[tanstack-field.directive.ts:59](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/angular-form/src/tanstack-field.directive.ts#L59)
+[tanstack-field.directive.ts:56](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L56)
 
 ***
 
@@ -118,7 +118,7 @@ An optional default value for the field.
 
 #### Defined in
 
-[tanstack-field.directive.ts:48](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/angular-form/src/tanstack-field.directive.ts#L48)
+[tanstack-field.directive.ts:45](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L45)
 
 ***
 
@@ -136,7 +136,7 @@ The field name. The type will be `DeepKeys<TParentData>` to ensure your name is
 
 #### Defined in
 
-[tanstack-field.directive.ts:44](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/angular-form/src/tanstack-field.directive.ts#L44)
+[tanstack-field.directive.ts:41](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L41)
 
 ***
 
@@ -148,7 +148,7 @@ tanstackField: FormApi<TParentData, TFormValidator>;
 
 #### Defined in
 
-[tanstack-field.directive.ts:52](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/angular-form/src/tanstack-field.directive.ts#L52)
+[tanstack-field.directive.ts:49](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L49)
 
 ***
 
@@ -164,7 +164,7 @@ optional unmount: () => void;
 
 #### Defined in
 
-[tanstack-field.directive.ts:76](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/angular-form/src/tanstack-field.directive.ts#L76)
+[tanstack-field.directive.ts:73](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L73)
 
 ***
 
@@ -182,7 +182,7 @@ A validator provided by an extension, like `yupValidator` from `@tanstack/yup-fo
 
 #### Defined in
 
-[tanstack-field.directive.ts:51](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/angular-form/src/tanstack-field.directive.ts#L51)
+[tanstack-field.directive.ts:48](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L48)
 
 ***
 
@@ -200,7 +200,7 @@ A list of validators to pass to the field
 
 #### Defined in
 
-[tanstack-field.directive.ts:56](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/angular-form/src/tanstack-field.directive.ts#L56)
+[tanstack-field.directive.ts:53](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L53)
 
 ## Methods
 
@@ -225,7 +225,7 @@ children are checked.
 
 #### Defined in
 
-[tanstack-field.directive.ts:88](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/angular-form/src/tanstack-field.directive.ts#L88)
+[tanstack-field.directive.ts:85](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L85)
 
 ***
 
@@ -248,7 +248,7 @@ before a directive, pipe, or service instance is destroyed.
 
 #### Defined in
 
-[tanstack-field.directive.ts:84](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/angular-form/src/tanstack-field.directive.ts#L84)
+[tanstack-field.directive.ts:81](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L81)
 
 ***
 
@@ -274,4 +274,4 @@ It is invoked only once when the directive is instantiated.
 
 #### Defined in
 
-[tanstack-field.directive.ts:78](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/angular-form/src/tanstack-field.directive.ts#L78)
+[tanstack-field.directive.ts:75](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L75)

docs/framework/angular/reference/functions/injectform.md

@@ -25,4 +25,4 @@ function injectForm<TFormData, TFormValidator>(opts?): FormApi<TFormData, TFormV
 
 ## Defined in
 
-[inject-form.ts:4](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/angular-form/src/inject-form.ts#L4)
+[inject-form.ts:5](https://github.com/TanStack/form/blob/main/packages/angular-form/src/inject-form.ts#L5)

docs/framework/angular/reference/functions/injectstore.md

@@ -29,4 +29,4 @@ function injectStore<TFormData, TFormValidator, TSelected>(form, selector?): Sig
 
 ## Defined in
 
-[inject-store.ts:4](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/angular-form/src/inject-store.ts#L4)
+[inject-store.ts:4](https://github.com/TanStack/form/blob/main/packages/angular-form/src/inject-store.ts#L4)

docs/framework/lit/reference/classes/tanstackformcontroller.md

@@ -35,7 +35,7 @@ new TanStackFormController<TParentData, TFormValidator>(host, config?): TanStack
 
 #### Defined in
 
-[tanstack-form-controller.ts:93](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/lit-form/src/tanstack-form-controller.ts#L93)
+[tanstack-form-controller.ts:93](https://github.com/TanStack/form/blob/main/packages/lit-form/src/tanstack-form-controller.ts#L93)
 
 ## Properties
 
@@ -47,7 +47,7 @@ api: FormApi<TParentData, TFormValidator>;
 
 #### Defined in
 
-[tanstack-form-controller.ts:91](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/lit-form/src/tanstack-form-controller.ts#L91)
+[tanstack-form-controller.ts:91](https://github.com/TanStack/form/blob/main/packages/lit-form/src/tanstack-form-controller.ts#L91)
 
 ## Methods
 
@@ -101,7 +101,7 @@ render: renderCallback<TParentData, TName, TFieldValidator, TFormValidator, TDat
 
 #### Defined in
 
-[tanstack-form-controller.ts:112](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/lit-form/src/tanstack-form-controller.ts#L112)
+[tanstack-form-controller.ts:112](https://github.com/TanStack/form/blob/main/packages/lit-form/src/tanstack-form-controller.ts#L112)
 
 ***
 
@@ -125,7 +125,7 @@ which is only called when the component is connected to the document.
 
 #### Defined in
 
-[tanstack-form-controller.ts:102](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/lit-form/src/tanstack-form-controller.ts#L102)
+[tanstack-form-controller.ts:102](https://github.com/TanStack/form/blob/main/packages/lit-form/src/tanstack-form-controller.ts#L102)
 
 ***
 
@@ -150,4 +150,4 @@ document.
 
 #### Defined in
 
-[tanstack-form-controller.ts:108](https://github.com/TanStack/form/blob/bde3b1cb3de955b47034f0bfaa43dec13c67999a/packages/lit-form/src/tanstack-form-controller.ts#L108)
+[tanstack-form-controller.ts:108](https://github.com/TanStack/form/blob/main/packages/lit-form/src/tanstack-form-controller.ts#L108)

docs/framework/react/guides/react-native.md

@@ -17,7 +17,7 @@ Here is an example:
   {field => (
     <>
       <Text>Age:</Text>
-      <TextInput value={field.state.value} onChangeText={handleChange} />
+      <TextInput value={field.state.value} onChangeText={field.handleChange} />
       {
         field.state.meta.errors
           ? <Text>{field.state.meta.errors.join(', ')}</Text>