fieldErrors added to arrayProxy.

Author: ciscoheat

CHANGELOG.md

@@ -7,9 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- A `fieldErrors` store is added to [arrayProxy](https://superforms.rocks/api#arrayproxysuperform-fieldname-options), so field errors (for items in the array, not the array itself) can be accessed.
+
 ### Fixed
 
 - When cancelling a request, timers were cancelled too early in [SPA mode](https://superforms.rocks/concepts/spa) and when [client-side validation](https://superforms.rocks/concepts/client-validation) failed.
+- [Proxies](https://superforms.rocks/concepts/proxy-objects) didn't set or update a nested path unless it previously existed.
 
 ## [1.10.2] - 2023-11-14
 

src/lib/client/proxies.ts

@@ -240,6 +240,8 @@ function _stringProxy<
   };
 }
 
+type ArrayFieldErrors = any[];
+
 export function arrayProxy<
   T extends ZodValidation<AnyZodObject>,
   Path extends FormPathArrays<z.infer<UnwrapEffects<T>>>
@@ -252,15 +254,66 @@ export function arrayProxy<
   path: Path;
   values: Writable<FormPathType<z.infer<UnwrapEffects<T>>, Path>>;
   errors: Writable<string[] | undefined>;
+  fieldErrors: Writable<ArrayFieldErrors>;
 } {
+  const allErrors = fieldProxy(
+    superForm.errors,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    `${path}` as any
+  );
+
+  const onlyFieldErrors = derived<typeof allErrors, ArrayFieldErrors>(
+    allErrors,
+    ($errors) => {
+      const output: ArrayFieldErrors = [];
+      for (const key in $errors) {
+        if (key == '_errors') continue;
+        output[key] = $errors[key];
+      }
+      return output as ArrayFieldErrors;
+    }
+  );
+
+  function updateArrayErrors(
+    errors: Record<number, any> | undefined,
+    value: ArrayFieldErrors
+  ) {
+    if (errors !== undefined) {
+      for (const key in errors) {
+        if (key == '_errors') continue;
+        errors[key] = undefined;
+      }
+    }
+    if (value !== undefined) {
+      for (const key in value) {
+        if (errors === undefined) errors = {};
+        errors[key] = value[key];
+      }
+    }
+    return errors;
+  }
+
+  const fieldErrors: Writable<ArrayFieldErrors> = {
+    subscribe: onlyFieldErrors.subscribe,
+    update(upd: Updater<ArrayFieldErrors>) {
+      allErrors.update(($errors) =>
+        updateArrayErrors($errors, upd($errors))
+      );
+    },
+    set(value: ArrayFieldErrors) {
+      allErrors.update(($errors) => updateArrayErrors($errors, value));
+    }
+  };
+
   return {
     path,
     values: superFieldProxy(superForm, path, options),
     errors: fieldProxy(
       superForm.errors,
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       `${path}._errors` as any
-    ) as Writable<string[] | undefined>
+    ) as Writable<string[] | undefined>,
+    fieldErrors
   };
 }
 
@@ -407,14 +460,20 @@ export function fieldProxy<T extends object, Path extends FormPath<T>>(
     },
     update(upd: Updater<FormPathType<T, Path>>) {
       form.update((f) => {
-        const output = traversePath(f, path2);
+        const output = traversePath(f, path2, ({ parent, key, value }) => {
+          if (value === undefined) parent[key] = {};
+          return parent[key];
+        });
         if (output) output.parent[output.key] = upd(output.value);
         return f;
       });
     },
     set(value: FormPathType<T, Path>) {
       form.update((f) => {
-        const output = traversePath(f, path2);
+        const output = traversePath(f, path2, ({ parent, key, value }) => {
+          if (value === undefined) parent[key] = {};
+          return parent[key];
+        });
         if (output) output.parent[output.key] = value;
         return f;
       });

src/lib/stringPath.ts

@@ -141,7 +141,7 @@ export type FormPathType<T, P extends string> = P extends keyof T
   : P extends `${number}]${infer Rest}`
   ? NonNullable<T> extends (infer U)[]
     ? FormPathType<U, Rest>
-    : { invalid_path: P; Type: T }
+    : { invalid_path1: P; Type: T }
   : P extends `${infer K}[${infer Rest}`
   ? K extends keyof NonNullable<T>
     ? FormPathType<NonNullable<T>[K], Rest>
@@ -151,23 +151,23 @@ export type FormPathType<T, P extends string> = P extends keyof T
     ? FormPathType<NonNullable<T>[K], Rest>
     : NonNullable<T> extends (infer U)[]
     ? FormPathType<U, Rest>
-    : { invalid_path: P; Type: T }
+    : { invalid_path2: P; Type: T }
   : P extends `[${infer K}].${infer Rest}`
   ? K extends number
     ? T extends (infer U)[]
       ? FormPathType<U, Rest>
-      : { invalid_path: P; Type: T }
+      : { invalid_path3: P; Type: T }
     : P extends `${number}`
     ? NonNullable<T> extends (infer U)[]
       ? U
-      : { invalid_path: P; Type: T }
+      : { invalid_path4: P; Type: T }
     : P extends keyof NonNullable<T>
     ? NonNullable<T>[P]
     : P extends `${number}`
     ? NonNullable<T> extends (infer U)[]
       ? U
-      : { invalid_path: P; Type: T }
-    : { invalid_path: P; Type: T }
+      : { invalid_path5: P; Type: T }
+    : { invalid_path6: P; Type: T }
   : P extends ''
   ? T
-  : { invalid_path: P; Type: T };
+  : { invalid_path7: P; Type: T };

src/routes/tests/array-component/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { superForm } from '$lib/client';
+  import { arrayProxy, superForm } from '$lib/client';
   import type { PageData } from './$types';
   import SuperDebug from '$lib/client/SuperDebug.svelte';
   import AutoComplete from './AutoComplete.svelte';
@@ -16,9 +16,11 @@
     { value: 'A', label: 'Aldebaran' },
     { value: 'B', label: 'Betelgeuse' }
   ];
+
+  const { fieldErrors } = arrayProxy(pageForm, 'sub.tags');
 </script>
 
-<SuperDebug data={{ $form, $errors }} />
+<SuperDebug data={{ $form, $errors, $fieldErrors }} />
 
 {#if $tainted}<h3>FORM IS TAINTED</h3>{/if}
 

src/routes/tests/array-component/AutoComplete.svelte

@@ -8,16 +8,19 @@
   import type { ZodValidation, FormPathArrays } from '$lib';
   import type { SuperForm } from '$lib/client';
   import { arrayProxy, type TaintOptions } from '$lib/client';
+  import SuperDebug from '$lib/client/SuperDebug.svelte';
 
   export let form: SuperForm<ZodValidation<T>, unknown>;
   export let field: FormPathArrays<z.infer<T>>;
   export let options: { value: string; label: string }[];
   export let label = '';
   export let taint: TaintOptions = true;
 
-  const { values, errors } = arrayProxy(form, field, { taint });
+  const { values, errors, fieldErrors } = arrayProxy(form, field, { taint });
 </script>
 
+<SuperDebug label="Component fieldErrors" data={$fieldErrors} />
+
 {#if label}<label for={field}>{label}</label>{/if}
 
 <!-- Note that the selected attribute is required for this to work without JS -->
@@ -29,8 +32,21 @@
   {/each}
 </select>
 
+<button
+  type="button"
+  on:click={() => {
+    $fieldErrors = [];
+  }}>Change errors</button
+>
+
 {#if $errors}<p class="invalid">{$errors}</p>{/if}
 
+{#each $fieldErrors as $err, i}
+  {#if $err}
+    <p class="invalid">Item {$values[i]}: {$err}</p>
+  {/if}
+{/each}
+
 <style>
   .invalid {
     color: crimson;

src/routes/tests/array-component/schema.ts

@@ -2,6 +2,6 @@ import { z } from 'zod';
 
 export const schema = z.object({
   sub: z.object({
-    tags: z.string().min(1).array().min(1)
+    tags: z.string().min(2).array().min(2)
   })
 });