From b4bc6cde211bb0c5fb8bc2708f862826a488efa8 Mon Sep 17 00:00:00 2001
From: okxint <cashmein.eth@gmail.com>
Date: Thu, 1 Oct 2026 13:06:23 +0530
Subject: [PATCH] fix(angular-form): use stable APP_ID-based formId for SSR
 hydration

---
 packages/angular-form/src/inject-form.ts | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/angular-form/src/inject-form.ts b/packages/angular-form/src/inject-form.ts
index 449534de0c..05150b509e 100644
--- a/packages/angular-form/src/inject-form.ts
+++ b/packages/angular-form/src/inject-form.ts
@@ -1,3 +1,4 @@
+import { inject, APP_ID } from '@angular/core'
 import { FormApi } from '@tanstack/form-core'
 import { injectStore } from '@tanstack/angular-store'
 import type {
@@ -6,6 +7,14 @@ import type {
   FormValidateOrFn,
 } from '@tanstack/form-core'
 
+const _formCounters = new Map<string, number>()
+
+function nextFormId(appId: string): string {
+  const n = (_formCounters.get(appId) ?? 0) + 1
+  _formCounters.set(appId, n)
+  return `${appId}-form-${n}`
+}
+
 export function injectForm<
   TFormData,
   TOnMount extends undefined | FormValidateOrFn<TFormData>,
@@ -35,6 +44,7 @@ export function injectForm<
     TSubmitMeta
   >,
 ) {
+  const appId = inject(APP_ID)
   const api = new FormApi<
     TFormData,
     TOnMount,
@@ -48,7 +58,7 @@ export function injectForm<
     TOnDynamicAsync,
     TOnServer,
     TSubmitMeta
-  >(opts)
+  >({ ...opts, formId: opts?.formId ?? nextFormId(appId) } as typeof opts)
 
   injectStore(api.store, (state) => state.isSubmitting)