addError method

Author: iatrophobic

README.md

@@ -1,6 +1,6 @@
 # svelte-command-form
 
-Modern form state management for Svelte built on top of the [Standard Schema](https://github.com/standard-schema/standard-schema) protocol. `svelte-command-form` helps you pair type-safe validators with imperative “command” functions (load actions, server functions, RPC endpoints, etc.) while keeping client state, server errors, and validation feedback perfectly aligned.
+Svelte-Command-Form allows you to have easy to use forms with commands instead of remote forms. Is this redundant? Maybe. However, you may not want to use an HTML form everytime. The API is greatly influenced by SvelteKit-Superforms, so if you are used to that you shouldn't have a problem here.
 
 ## Features
 
@@ -13,9 +13,9 @@ Modern form state management for Svelte built on top of the [Standard Schema](ht
 ## Installation
 
 ```bash
-pnpm add svelte-command-form
+pnpm add @akcodeworks/svelte-command-form
 # or
-npm install svelte-command-form
+npm install @akcodeworks/svelte-command-form
 ```
 
 ## Quick start
@@ -39,7 +39,7 @@ npm install svelte-command-form
 <p class="error">{form.errors.name.message}</p>
 {/if}
 
-<button disabled="{form.submitting}" on:click|preventDefault="{form.submit}">
+<button disabled="{form.submitting}" onclick="{form.submit}">
 	{form.submitting ? 'Saving…' : 'Save'}
 </button>
 ```
@@ -127,6 +127,7 @@ const form = new CommandForm(userSchema, { command: saveUser });
 - `validate()` – Runs schema validation without submitting, updating both `errors` and `issues`.
 - `submit()` – Parses the schema, calls hooks, executes the configured command, manages invalidation, and populates error state on failure.
 - `getErrors()` / `getIssues()` – Accessor helpers useful outside of `$state` reactivity (e.g., from tests).
+- `addError({path: string, message: string})` - Allows you to set an error on the form programatically (client side only)
 
 ### `standardValidate(schema, input)`
 
@@ -163,7 +164,7 @@ SvelteKit command functions currently expect JSON-serializable payloads, so `Fil
 	};
 </script>
 
-<input type="file" multiple on:change="{handleFiles}" />
+<input type="file" multiple onchange="{handleFiles}" />
 ```
 
 `normalizeFiles` outputs objects like:

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@akcodeworks/svelte-command-form",
-	"version": "0.0.1",
+	"version": "0.0.0",
 	"description": "Command pattern form helper for Svelte powered by Standard Schema validation.",
 	"scripts": {
 		"dev": "vite dev",

src/lib/command-form/command-form.svelte.ts

@@ -58,6 +58,12 @@ export class CommandForm<Schema extends StandardSchemaV1, TOut> {
     return standardValidate(this.schema, this.form as StandardSchemaV1.InferInput<Schema>);
   }
 
+  // set path to keyof schema or string
+
+  addError = (error: { path: string, message: string }) => {
+    (this.errors as any)[error.path] = { message: error.message };
+  }
+
   reset = () => {
     for (const key in this.form) delete (this.form as any)[key];
     Object.assign(this.form, this.resolveInitial());

src/routes/+page.svelte

@@ -23,7 +23,9 @@
 </script>
 
 <input type="text" placeholder="Name" bind:value={f.form.name} />
+
 <button onclick={f.submit}>submit</button>
+<button onclick={() => f.addError({ path: 'name', message: 'yeet' })}>custom error</button>
 {#if f.errors.name?.message}
 	<p style="color: red">{f.errors.name.message}</p>
 {/if}