Skip to content

Expose the issue.path property in remoteForm.fields.allIssues() #14688

@x0k

Description

@x0k

Describe the problem

I need access to the issue.path property when using remoteForm.fields.allIssues() to automatically set errors in a dynamically generated form. Simplified usage example:

page.svelte

<Form issues={remoteForm.fields.allIssues()} {...} />

form.svelte

<script>
  let { issues = [], fields, ... } = $props() 

  const fieldErrors = $derived(Object.groupBy(issues, (i) => i.path[0]))
</script>

{#each fields as field (field.name)}
  <label for={field.name}>{field.title}</label>
  {#if field.type === 'text'}
     <input name={field.name} />
  {/if}
  {#each fieldErrors.get(field.name) as error}
    <p>{error.message}</p>
  {/each}
{/each}

NOTE: This is not a SvelteKit-specific component, so using remoteFunction.fields.fieldName.issues() is not suitable.

This property could also be useful for implementing the Error summary pattern — specifically for generating links to the fields containing errors.

Describe the proposed solution

Expose the issue.path property

Alternatives considered

No response

Importance

nice to have

Additional Information

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions