{"record":{"id":"f36d5cca07c6c3ba","repo":"sveltejs/kit","slug":"a-form-object-can-only-be-attached-to-a-single-f","errorCode":null,"errorMessage":"A form object can only be attached to a single `<form>` element. To create multiple instances, use `${name}.for(key)` (dev)","messagePattern":"A form object can only be attached to a single `<form>` element\\. To create multiple instances, use `(.+?)\\.for\\(key\\)` \\(dev\\)","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/kit/src/runtime/client/remote-functions/form.svelte.js","lineNumber":401,"sourceCode":"\t\t}\n\n\t\tconst instance = /** @type {RemoteForm<T, U>} */ ({});\n\n\t\tinstance.method = 'POST';\n\t\tObject.defineProperty(instance, 'action', {\n\t\t\tget: get_action,\n\t\t\tenumerable: true\n\t\t});\n\n\t\tinstance[createAttachmentKey()] = (/** @type {HTMLFormElement} */ form) => {\n\t\t\tif (element) {\n\t\t\t\tlet message = `A form object can only be attached to a single \\`<form>\\` element`;\n\t\t\t\tif (DEV && !key) {\n\t\t\t\t\tconst name = id.split('/').pop();\n\t\t\t\t\tmessage += `. To create multiple instances, use \\`${name}.for(key)\\``;\n\t\t\t\t}\n\n\t\t\t\tthrow new Error(message);\n\t\t\t}\n\n\t\t\telement = form;\n\n\t\t\ttouched = {};\n\t\t\tdirty = {};\n\t\t\tcan_validate = {};\n\n\t\t\t/** @param {SubmitEvent} event */\n\t\t\tconst handle_submit = async (event) => {\n\t\t\t\tconst form = /** @type {HTMLFormElement} */ (event.target);\n\t\t\t\tconst method = event.submitter?.hasAttribute('formmethod')\n\t\t\t\t\t? /** @type {HTMLButtonElement | HTMLInputElement} */ (event.submitter).formMethod\n\t\t\t\t\t: clone(form).method;\n\n\t\t\t\tif (method !== 'post') return;\n\n\t\t\t\tconst action = new URL(","sourceCodeStart":383,"sourceCodeEnd":419,"githubUrl":"https://github.com/sveltejs/kit/blob/03f1687fe612ce3d2d9131139b5b188d9cf90c64/packages/kit/src/runtime/client/remote-functions/form.svelte.js#L383-L419","documentation":"Each remote form instance can be attached to exactly one <form> element; binding the same form object to multiple elements would make its state (message, dirty, submitting) ambiguous. In DEV the error appends guidance to use form.for(key) to create per-key instances.","triggerScenarios":"Using the same remote form function result in two <form use:form...> elements on one page (e.g. rendering the form in a list without keys); sharing a module-level form object across components.","commonSituations":"Rendering a form component inside {#each} for multiple items; reusing one imported form object in a header and a modal; refactor extracting a form into a shared module.","solutions":["Create keyed instances with myForm.for(item.id) for each rendered form","Instantiate the form per component rather than sharing a module-level object","Ensure each <form> element binds to its own form instance"],"exampleFix":"// before\n{#each items as item}\n  <form use:deleteForm>...</form>\n{/each}\n// after\n{#each items as item}\n  {@const f = deleteForm.for(item.id)}\n  <form use:f>...</form>\n{/each}","handlingStrategy":"validation","validationCode":"// ensure one instance per <form>: create keyed instances before binding\nconst forms = new Map();\nfunction formFor(base, key) {\n  if (!forms.has(key)) forms.set(key, base.for(key));\n  return forms.get(key);\n}","typeGuard":null,"tryCatchPattern":"try { attach(form, element); } catch (e) { if (e.message.includes('single `<form>` element')) { const keyed = form.for(uniqueKey); attach(keyed, element); } else { throw e; } }","preventionTips":["Never share a form object across multiple <form> bindings","Use .for(key) inside {#each} blocks","Instantiate forms within the component that owns the <form> element"],"tags":["remote-functions","forms","sveltekit"],"backgroundTag":"form-reuse-single-binding","analyzedSha":"03f1687fe612ce3d2d9131139b5b188d9cf90c64","analyzedAt":"2026-09-02T02:01:50.504Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-09T06:17:21.866Z"}