feat(qwikcity/actions): dotnotation field-errors (#6568)

* feat(qwikcity/actions): dotnotation field-errors

On very complex nested types, you loose the location or the field the error belongs to. Closes #5463

BREAKING CHANGE: The fieldErrors type on the action changed from Record<string,string[]>
(simplified) to Record<string,string> where the key is now dot notation

closes #5463

* fix types and adding test

* make the type partial

* introduce arrays to the type and flattenErrors

* run api.update

* chore: run api.update

* chore: run api.update

* adding array to the test

---------

Co-authored-by: Tobias Zimmermann <ich@tzdesign.de>
Co-authored-by: gioboa <giorgiob.boa@gmail.com>
Co-authored-by: PatrickJS <github@patrickjs.com>

packages/docs/src/routes/api/qwik-city/api.json

@@ -26,7 +26,7 @@
  }
  ],
  "kind": "TypeAlias",
- "content": "```typescript\nexport type ActionConstructor = {\n <OBJ extends Record<string, any> | void | null, VALIDATOR extends TypedDataValidator, REST extends [DataValidator, ...DataValidator[]]>(actionQrl: (data: GetValidatorType<VALIDATOR>, event: RequestEventAction) => ValueOrPromise<OBJ>, options: {\n readonly id?: string;\n readonly validation: [VALIDATOR, ...REST];\n }): Action<StrictUnion<OBJ | FailReturn<zod.typeToFlattenedError<GetValidatorType<VALIDATOR>>> | FailReturn<FailOfRest<REST>>>, GetValidatorType<VALIDATOR>, false>;\n <OBJ extends Record<string, any> | void | null, VALIDATOR extends TypedDataValidator>(actionQrl: (data: GetValidatorType<VALIDATOR>, event: RequestEventAction) => ValueOrPromise<OBJ>, options: {\n readonly id?: string;\n readonly validation: [VALIDATOR];\n }): Action<StrictUnion<OBJ | FailReturn<zod.typeToFlattenedError<GetValidatorType<VALIDATOR>>>>, GetValidatorType<VALIDATOR>, false>;\n <OBJ extends Record<string, any> | void | null, REST extends [DataValidator, ...DataValidator[]]>(actionQrl: (data: JSONObject, event: RequestEventAction) => ValueOrPromise<OBJ>, options: {\n readonly id?: string;\n readonly validation: REST;\n }): Action<StrictUnion<OBJ | FailReturn<FailOfRest<REST>>>>;\n <OBJ extends Record<string, any> | void | null, VALIDATOR extends TypedDataValidator, REST extends [DataValidator, ...DataValidator[]]>(actionQrl: (data: GetValidatorType<VALIDATOR>, event: RequestEventAction) => ValueOrPromise<OBJ>, options: VALIDATOR, ...rest: REST): Action<StrictUnion<OBJ | FailReturn<zod.typeToFlattenedError<GetValidatorType<VALIDATOR>>> | FailReturn<FailOfRest<REST>>>, GetValidatorType<VALIDATOR>, false>;\n <OBJ extends Record<string, any> | void | null, VALIDATOR extends TypedDataValidator>(actionQrl: (data: GetValidatorType<VALIDATOR>, event: RequestEventAction) => ValueOrPromise<OBJ>, options: VALIDATOR): Action<StrictUnion<OBJ | FailReturn<zod.typeToFlattenedError<GetValidatorType<VALIDATOR>>>>, GetValidatorType<VALIDATOR>, false>;\n <OBJ extends Record<string, any> | void | null, REST extends [DataValidator, ...DataValidator[]]>(actionQrl: (form: JSONObject, event: RequestEventAction) => ValueOrPromise<OBJ>, ...rest: REST): Action<StrictUnion<OBJ | FailReturn<FailOfRest<REST>>>>;\n <OBJ>(actionQrl: (form: JSONObject, event: RequestEventAction) => ValueOrPromise<OBJ>, options?: {\n readonly id?: string;\n }): Action<StrictUnion<OBJ>>;\n};\n```\n**References:** [TypedDataValidator](#typeddatavalidator)<!-- -->, [DataValidator](#datavalidator)<!-- -->, [GetValidatorType](#getvalidatortype)<!-- -->, [Action](#action)<!-- -->, [StrictUnion](#strictunion)<!-- -->, [FailReturn](#failreturn)<!-- -->, [FailOfRest](#failofrest)<!-- -->, [JSONObject](#jsonobject)",
+ "content": "```typescript\nexport type ActionConstructor = {\n <OBJ extends Record<string, any> | void | null, VALIDATOR extends TypedDataValidator, REST extends [DataValidator, ...DataValidator[]]>(actionQrl: (data: GetValidatorType<VALIDATOR>, event: RequestEventAction) => ValueOrPromise<OBJ>, options: {\n readonly id?: string;\n readonly validation: [VALIDATOR, ...REST];\n }): Action<StrictUnion<OBJ | FailReturn<ValidatorErrorType<GetValidatorType<VALIDATOR>>> | FailReturn<FailOfRest<REST>>>, GetValidatorType<VALIDATOR>, false>;\n <OBJ extends Record<string, any> | void | null, VALIDATOR extends TypedDataValidator>(actionQrl: (data: GetValidatorType<VALIDATOR>, event: RequestEventAction) => ValueOrPromise<OBJ>, options: {\n readonly id?: string;\n readonly validation: [VALIDATOR];\n }): Action<StrictUnion<OBJ | FailReturn<ValidatorErrorType<GetValidatorType<VALIDATOR>>>>, GetValidatorType<VALIDATOR>, false>;\n <OBJ extends Record<string, any> | void | null, REST extends [DataValidator, ...DataValidator[]]>(actionQrl: (data: JSONObject, event: RequestEventAction) => ValueOrPromise<OBJ>, options: {\n readonly id?: string;\n readonly validation: REST;\n }): Action<StrictUnion<OBJ | FailReturn<FailOfRest<REST>>>>;\n <OBJ extends Record<string, any> | void | null, VALIDATOR extends TypedDataValidator, REST extends [DataValidator, ...DataValidator[]]>(actionQrl: (data: GetValidatorType<VALIDATOR>, event: RequestEventAction) => ValueOrPromise<OBJ>, options: VALIDATOR, ...rest: REST): Action<StrictUnion<OBJ | FailReturn<ValidatorErrorType<GetValidatorType<VALIDATOR>>> | FailReturn<FailOfRest<REST>>>, GetValidatorType<VALIDATOR>, false>;\n <OBJ extends Record<string, any> | void | null, VALIDATOR extends TypedDataValidator>(actionQrl: (data: GetValidatorType<VALIDATOR>, event: RequestEventAction) => ValueOrPromise<OBJ>, options: VALIDATOR): Action<StrictUnion<OBJ | FailReturn<ValidatorErrorType<GetValidatorType<VALIDATOR>>>>, GetValidatorType<VALIDATOR>, false>;\n <OBJ extends Record<string, any> | void | null, REST extends [DataValidator, ...DataValidator[]]>(actionQrl: (form: JSONObject, event: RequestEventAction) => ValueOrPromise<OBJ>, ...rest: REST): Action<StrictUnion<OBJ | FailReturn<FailOfRest<REST>>>>;\n <OBJ>(actionQrl: (form: JSONObject, event: RequestEventAction) => ValueOrPromise<OBJ>, options?: {\n readonly id?: string;\n }): Action<StrictUnion<OBJ>>;\n};\n```\n**References:** [TypedDataValidator](#typeddatavalidator)<!-- -->, [DataValidator](#datavalidator)<!-- -->, [GetValidatorType](#getvalidatortype)<!-- -->, [Action](#action)<!-- -->, [StrictUnion](#strictunion)<!-- -->, [FailReturn](#failreturn)<!-- -->, [ValidatorErrorType](#validatorerrortype)<!-- -->, [FailOfRest](#failofrest)<!-- -->, [JSONObject](#jsonobject)",
  "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik-city/runtime/src/types.ts",
  "mdFile": "qwik-city.actionconstructor.md"
  },
@@ -856,6 +856,34 @@
  "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik-city/runtime/src/server-functions.ts",
  "mdFile": "qwik-city.validator_.md"
  },
+ {
+ "name": "ValidatorErrorKeyDotNotation",
+ "id": "validatorerrorkeydotnotation",
+ "hierarchy": [
+ {
+ "name": "ValidatorErrorKeyDotNotation",
+ "id": "validatorerrorkeydotnotation"
+ }
+ ],
+ "kind": "TypeAlias",
+ "content": "```typescript\nexport type ValidatorErrorKeyDotNotation<T, Prefix extends string = ''> = T extends object ? {\n [K in keyof T & string]: T[K] extends (infer U)[] ? U extends object ? `${Prefix}${K}[]` | `${Prefix}${K}[]${ValidatorErrorKeyDotNotation<U, '.'>}` : `${Prefix}${K}[]` : T[K] extends object ? ValidatorErrorKeyDotNotation<T[K], `${Prefix}${K}.`> : `${Prefix}${K}`;\n}[keyof T & string] : never;\n```\n**References:** [ValidatorErrorKeyDotNotation](#validatorerrorkeydotnotation)",
+ "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik-city/runtime/src/types.ts",
+ "mdFile": "qwik-city.validatorerrorkeydotnotation.md"
+ },
+ {
+ "name": "ValidatorErrorType",
+ "id": "validatorerrortype",
+ "hierarchy": [
+ {
+ "name": "ValidatorErrorType",
+ "id": "validatorerrortype"
+ }
+ ],
+ "kind": "TypeAlias",
+ "content": "```typescript\nexport type ValidatorErrorType<T, U = string> = {\n formErrors: U[];\n fieldErrors: Partial<{\n [K in ValidatorErrorKeyDotNotation<T>]: K extends `${infer _Prefix}[]${infer _Suffix}` ? U[] : U;\n }>;\n};\n```\n**References:** [ValidatorErrorKeyDotNotation](#validatorerrorkeydotnotation)",
+ "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik-city/runtime/src/types.ts",
+ "mdFile": "qwik-city.validatorerrortype.md"
+ },
  {
  "name": "validatorQrl",
  "id": "validatorqrl",

packages/docs/src/routes/api/qwik-city/index.md

@@ -40,7 +40,7 @@ export type ActionConstructor = {
  ): Action<
  StrictUnion<
  | OBJ
- | FailReturn<zod.typeToFlattenedError<GetValidatorType<VALIDATOR>>>
+ | FailReturn<ValidatorErrorType<GetValidatorType<VALIDATOR>>>
  | FailReturn<FailOfRest<REST>>
  >,
  GetValidatorType<VALIDATOR>,
@@ -60,7 +60,7 @@ export type ActionConstructor = {
  },
  ): Action<
  StrictUnion<
- OBJ | FailReturn<zod.typeToFlattenedError<GetValidatorType<VALIDATOR>>>
+ OBJ | FailReturn<ValidatorErrorType<GetValidatorType<VALIDATOR>>>
  >,
  GetValidatorType<VALIDATOR>,
  false
@@ -92,7 +92,7 @@ export type ActionConstructor = {
  ): Action<
  StrictUnion<
  | OBJ
- | FailReturn<zod.typeToFlattenedError<GetValidatorType<VALIDATOR>>>
+ | FailReturn<ValidatorErrorType<GetValidatorType<VALIDATOR>>>
  | FailReturn<FailOfRest<REST>>
  >,
  GetValidatorType<VALIDATOR>,
@@ -109,7 +109,7 @@ export type ActionConstructor = {
  options: VALIDATOR,
  ): Action<
  StrictUnion<
- OBJ | FailReturn<zod.typeToFlattenedError<GetValidatorType<VALIDATOR>>>
+ OBJ | FailReturn<ValidatorErrorType<GetValidatorType<VALIDATOR>>>
  >,
  GetValidatorType<VALIDATOR>,
  false
@@ -136,7 +136,7 @@ export type ActionConstructor = {
 };
 ```
 
-**References:** [TypedDataValidator](#typeddatavalidator), [DataValidator](#datavalidator), [GetValidatorType](#getvalidatortype), [Action](#action), [StrictUnion](#strictunion), [FailReturn](#failreturn), [FailOfRest](#failofrest), [JSONObject](#jsonobject)
+**References:** [TypedDataValidator](#typeddatavalidator), [DataValidator](#datavalidator), [GetValidatorType](#getvalidatortype), [Action](#action), [StrictUnion](#strictunion), [FailReturn](#failreturn), [ValidatorErrorType](#validatorerrortype), [FailOfRest](#failofrest), [JSONObject](#jsonobject)
 
 [Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-city/runtime/src/types.ts)
 
@@ -2395,6 +2395,48 @@ validator$: ValidatorConstructor;
 
 [Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-city/runtime/src/server-functions.ts)
 
+## ValidatorErrorKeyDotNotation
+
+```typescript
+export type ValidatorErrorKeyDotNotation<
+ T,
+ Prefix extends string = "",
+> = T extends object
+ ? {
+ [K in keyof T & string]: T[K] extends (infer U)[]
+ ? U extends object
+ ?
+ | `${Prefix}${K}[]`
+ | `${Prefix}${K}[]${ValidatorErrorKeyDotNotation<U, ".">}`
+ : `${Prefix}${K}[]`
+ : T[K] extends object
+ ? ValidatorErrorKeyDotNotation<T[K], `${Prefix}${K}.`>
+ : `${Prefix}${K}`;
+ }[keyof T & string]
+ : never;
+```
+
+**References:** [ValidatorErrorKeyDotNotation](#validatorerrorkeydotnotation)
+
+[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-city/runtime/src/types.ts)
+
+## ValidatorErrorType
+
+```typescript
+export type ValidatorErrorType<T, U = string> = {
+ formErrors: U[];
+ fieldErrors: Partial<{
+ [K in ValidatorErrorKeyDotNotation<T>]: K extends `${infer _Prefix}[]${infer _Suffix}`
+ ? U[]
+ : U;
+ }>;
+};
+```
+
+**References:** [ValidatorErrorKeyDotNotation](#validatorerrorkeydotnotation)
+
+[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik-city/runtime/src/types.ts)
+
 ## validatorQrl
 
 ```typescript

packages/docs/src/routes/api/qwik/api.json

@@ -1774,7 +1774,7 @@
  }
  ],
  "kind": "Function",
- "content": "> This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.\n> \n\nInstall a service worker which will prefetch the bundles.\n\nThere can only be one service worker per page. Because there can be many separate Qwik Containers on the page each container needs to load its prefetch graph using `PrefetchGraph` component.\n\n\n```typescript\nPrefetchServiceWorker: (opts: {\n base?: string;\n scope?: string;\n path?: string;\n verbose?: boolean;\n fetchBundleGraph?: boolean;\n nonce?: string;\n}) => JSXNode<'script'>\n```\n\n\n<table><thead><tr><th>\n\nParameter\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\nopts\n\n\n</td><td>\n\n{ base?: string; scope?: string; path?: string; verbose?: boolean; fetchBundleGraph?: boolean; nonce?: string; }\n\n\n</td><td>\n\nOptions for the prefetch service worker.\n\n- `base` - Base URL for the service worker `import.meta.env.BASE_URL` or `/`<!-- -->. Default is `import.meta.env.BASE_URL` - `scope` - Base URL for when the service-worker will activate. Default is `/` - `path` - Path to the service worker. Default is `qwik-prefetch-service-worker.js` unless you pass a path that starts with a `/` then the base is ignored. Default is `qwik-prefetch-service-worker.js` - `verbose` - Verbose logging for the service worker installation. Default is `false` - `nonce` - Optional nonce value for security purposes, defaults to `undefined`<!-- -->.\n\n\n</td></tr>\n</tbody></table>\n**Returns:**\n\n[JSXNode](#jsxnode)<!-- -->&lt;'script'&gt;",
+ "content": "> This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.\n> \n\nInstall a service worker which will prefetch the bundles.\n\nThere can only be one service worker per page. Because there can be many separate Qwik Containers on the page each container needs to load its prefetch graph using `PrefetchGraph` component.\n\n\n```typescript\nPrefetchServiceWorker: (opts: {\n base?: string;\n scope?: string;\n path?: string;\n verbose?: boolean;\n fetchBundleGraph?: boolean;\n nonce?: string;\n}) => JSXNode<'script'>\n```\n\n\n<table><thead><tr><th>\n\nParameter\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\nopts\n\n\n</td><td>\n\n{ base?: string; scope?: string; path?: string; verbose?: boolean; fetchBundleGraph?: boolean; nonce?: string; }\n\n\n</td><td>\n\nOptions for the prefetch service worker.\n\n- `base` - Base URL for the service worker `import.meta.env.BASE_URL` or `/`<!-- -->. Default is `import.meta.env.BASE_URL` - `scope` - Base URL for when the service-worker will activate. Default is `/` - `path` - Path to the service worker. Default is `qwik-prefetch-service-worker.js` unless you pass a path that starts with a `/` then the base is ignored. Default is `qwik-prefetch-service-worker.js` - `verbose` - Verbose logging for the service worker installation. Default is `false` - `nonce` - Optional nonce value for security purposes, defaults to `undefined`<!-- -->.\n\n\n</td></tr>\n</tbody></table>\n**Returns:**\n\nJSXNode&lt;'script'&gt;",
  "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/components/prefetch.ts",
  "mdFile": "qwik.prefetchserviceworker.md"
  },

packages/docs/src/routes/api/qwik/index.md

@@ -3625,7 +3625,7 @@ _(Optional)_ Options for the loading prefetch graph.
 </tbody></table>
 **Returns:**
 
-[JSXNode](#jsxnode)&lt;"script"&gt;
+JSXNode&lt;"script"&gt;
 
 [Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/components/prefetch.ts)
 
@@ -3679,7 +3679,7 @@ Options for the prefetch service worker.
 </tbody></table>
 **Returns:**
 
-[JSXNode](#jsxnode)&lt;'script'&gt;
+JSXNode&lt;'script'&gt;
 
 [Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/components/prefetch.ts)
 

packages/docs/src/routes/docs/(qwikcity)/action/index.mdx

@@ -24,6 +24,7 @@ contributors:
  - adamdbradley
  - gioboa
  - jemsco
+ - tzdesign
 updated_at: '2023-12-15T11:00:00Z'
 created_at: '2023-03-20T23:45:13Z'
 ---
@@ -340,6 +341,8 @@ export const useAddUser = routeAction$(
 
 Failures are stored in the `action.value` property, just like the success value. However, the `action.value.failed` property is set to `true` when the action fails. Futhermore, failure messages can be found in the `fieldErrors` object according to properties defined in your Zod schema.
 
+The `fieldErrors` become a dot notation object. See [Complex forms](/docs/advanced/complex-forms) for more information. 
+
 ```tsx
 import { component$ } from '@builder.io/qwik';
 import { Form } from '@builder.io/qwik-city';