feat(forms): pass SubmitEvent to FormSubmitOptions.action

volkanfilazi · volkanfilazi · commit 784b66f63dca · 2026-04-14T13:21:52.000+02:00
Allow submit action callbacks to access the SubmitEvent that triggered the form submission. This enables identifying the submitter button via event.submitter. Closes #67334
diff --git a/MODULE.bazel.lock b/MODULE.bazel.lock
diff --git a/packages/forms/signals/src/api/structure.ts b/packages/forms/signals/src/api/structure.ts
@@ -378,14 +378,17 @@ export function applyWhenValue(
 export async function submit<TModel>(
   form: FieldTree<TModel>,
   options?: NoInfer<FormSubmitOptions<unknown, TModel>>,
+  submitEvent?: SubmitEvent,
 ): Promise<boolean>;
 export async function submit<TModel>(
   form: FieldTree<TModel>,
   action: NoInfer<FormSubmitOptions<unknown, TModel>['action']>,
+  submitEvent?: SubmitEvent,
 ): Promise<boolean>;
 export async function submit<TModel>(
   form: FieldTree<TModel>,
   options?: FormSubmitOptions<unknown, TModel> | FormSubmitOptions<unknown, TModel>['action'],
+  submitEvent?: SubmitEvent,
 ): Promise<boolean> {
   const node = untracked(form) as FieldState<unknown> as FieldNode;
 
@@ -417,7 +420,7 @@ export async function submit<TModel>(
   try {
     if (shouldRun) {
       node.submitState.selfSubmitting.set(true);
-      const errors = await untracked(() => action?.(field, detail));
+      const errors = await untracked(() => action?.(field, detail, submitEvent));
       errors && setSubmissionErrors(node, errors);
       return !errors || (isArray(errors) && errors.length === 0);
     } else {
diff --git a/packages/forms/signals/src/api/types.ts b/packages/forms/signals/src/api/types.ts
@@ -34,6 +34,7 @@ export interface FormSubmitOptions<TRootModel, TSubmittedModel> {
   action: (
     field: FieldTree<TRootModel & TSubmittedModel>,
     detail: {root: FieldTree<TRootModel>; submitted: FieldTree<TSubmittedModel>},
+    submitEvent?: SubmitEvent,
   ) => Promise<TreeValidationResult>;
   /**
    * Function to run when attempting to submit the form data but validation is failing.
diff --git a/packages/forms/signals/test/node/form_root.spec.ts b/packages/forms/signals/test/node/form_root.spec.ts
@@ -123,10 +123,13 @@ describe('FormRoot', () => {
     })
     class TestCmp {
       submitted = false;
+      submitterValue: string | null = null;
       readonly f = form(signal({}), {
         submission: {
-          action: async () => {
+          action: async (_field, _detail, event) => {
             this.submitted = true;
+            const submitter = event?.submitter as HTMLButtonElement | null;
+            this.submitterValue = submitter?.value ?? null;
           },
         },
       });
@@ -141,6 +144,7 @@ describe('FormRoot', () => {
 
     expect(event.defaultPrevented).toBe(true);
     expect(component.submitted).toBeTrue();
+    expect(component.submitterValue).toBe('submit');
   });
 });
 
