feat: Field validation from form schema (#925)

    * feat: add ability to pass errors to specific fields from Zod

    * chore: code cleanup

    * chore: fix various issues

    * chore: more TSC and lib fixes

    * ci: apply automated fixes

    * feat: add Yup support to schema valdiation

    * chore: rename contexts from code review

    * ci: apply automated fixes

    * feat: support form validaton in Valibot

    * chore: fix tests for createServerValidate

    * docs: add docs for validation logic

    * feat: apply transformError to all fields

    * fix: set transformed errors on nested fields

    * feat: spread zod errors into arrays

    * feat: spread yup errors into fields, nested and arrays

    * feat: spread valibot errors into fields, nested and arrays

    ---------

    Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
    Co-authored-by: Leonardo Montini <[email protected]>

Author: crutchcorn

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/react/guides/validation.md

@@ -477,6 +477,42 @@ These adapters also support async operations using the proper property names:
 />
 ```
 
+### Form Level Adapter Validation
+
+You can also use the adapter at the form level:
+
+```tsx
+import { zodValidator } from '@tanstack/zod-form-adapter'
+import { z } from 'zod'
+
+// ...
+
+const form = useForm({
+  validatorAdapter: zodValidator(),
+  validators: {
+    onChange: z.object({
+      age: z.number().gte(13, 'You must be 13 to make an account'),
+    }),
+  },
+})
+```
+
+If you use the adapter at the form level, it will pass the validation to the fields of the same name.
+
+This means that:
+
+```tsx
+
+<form.Field
+  name="age"
+  children={(field) => {
+    return <>{/* ... */}</>
+  }}
+/>
+```
+
+Will still display the error message from the form-level validation.
+
 ## Preventing invalid forms from being submitted
 
 The `onChange`, `onBlur` etc... callbacks are also run when the form is submitted and the submission is blocked if the form is invalid.

docs/framework/solid/guides/validation.md

@@ -376,6 +376,44 @@ These adapters also support async operations using the proper property names:
 />
 ```
 
+### Form Level Adapter Validation
+
+
+You can also use the adapter at the form level:
+
+```tsx
+import { zodValidator } from '@tanstack/zod-form-adapter'
+import { z } from 'zod'
+
+// ...
+
+const form = createForm(() => ({
+  validatorAdapter: zodValidator(),
+  validators: {
+    onChange: z.object({
+      age: z.number().gte(13, 'You must be 13 to make an account'),
+    }),
+  },
+}))
+```
+
+If you use the adapter at the form level, it will pass the validation to the fields of the same name.
+
+This means that:
+
+```tsx
+
+<form.Field
+  name="age"
+  children={(field) => {
+    return <>{/* ... */}</>
+  }}
+/>
+```
+
+Will still display the error message from the form-level validation.
+
+
 ## Preventing invalid forms from being submitted
 
 The `onChange`, `onBlur` etc... callbacks are also run when the form is submitted and the submission is blocked if the form is invalid.