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() + +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, @@ -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)