@tanstack/angular-form 1.12.3 → 1.13.0

package/dist/fesm2022/tanstack-angular-form.mjs

@@ -1,86 +1,124 @@
-import { FormApi, FieldApi } from '@tanstack/form-core';
+import { FieldApi, FormApi } from '@tanstack/form-core';
 export * from '@tanstack/form-core';
-import { injectStore as injectStore$1 } from '@tanstack/angular-store';
 import * as i0 from '@angular/core';
-import { booleanAttribute, numberAttribute, Input, Directive } from '@angular/core';
-
-function injectForm(opts) {
-    const api = new FormApi(opts);
-    injectStore$1(api.store, (state) => state.isSubmitting);
-    return api;
-}
+import { input, numberAttribute, booleanAttribute, computed, untracked, inject, Injector, effect, ChangeDetectorRef, Directive, signal, Injectable } from '@angular/core';
+import { injectStore as injectStore$1 } from '@tanstack/angular-store';
 
 class TanStackField {
-    name;
-    defaultValue;
-    asyncDebounceMs;
-    asyncAlways;
-    tanstackField;
-    validators;
-    listeners;
-    defaultMeta;
-    disableErrorFlat;
-    api;
-    getOptions() {
-        return {
-            defaultValue: this.defaultValue,
-            asyncDebounceMs: this.asyncDebounceMs,
-            asyncAlways: this.asyncAlways,
-            disableErrorFlat: this.disableErrorFlat,
-            validators: this.validators,
-            listeners: this.listeners,
-            defaultMeta: this.defaultMeta,
-            name: this.name,
-            form: this.tanstackField,
-        };
-    }
-    unmount;
-    ngOnInit() {
-        this.api = new FieldApi(this.getOptions());
-        this.unmount = this.api.mount();
+    name = input.required();
+    defaultValue = input();
+    asyncDebounceMs = input(undefined, {
+        transform: numberAttribute,
+    });
+    asyncAlways = input(undefined, {
+        transform: booleanAttribute,
+    });
+    tanstackField = input.required();
+    validators = input();
+    listeners = input();
+    defaultMeta = input();
+    mode = input();
+    disableErrorFlat = input();
+    _api = computed(() => {
+        return new FieldApi(untracked(this.options));
+    });
+    get api() {
+        return this._api();
     }
-    ngOnDestroy() {
-        this.unmount?.();
+    options = computed(() => ({
+        defaultValue: this.defaultValue(),
+        asyncDebounceMs: this.asyncDebounceMs(),
+        asyncAlways: this.asyncAlways(),
+        disableErrorFlat: this.disableErrorFlat(),
+        validators: this.validators(),
+        listeners: this.listeners(),
+        defaultMeta: this.defaultMeta(),
+        name: this.name(),
+        form: this.tanstackField(),
+    }));
+    injector = inject(Injector);
+    constructor() {
+        effect((onCleanup) => {
+            const unmount = this._api().mount();
+            onCleanup(() => {
+                unmount();
+            });
+        });
+        effect(() => {
+            this._api().update(this.options());
+        });
     }
-    ngOnChanges() {
-        const api = this.api;
-        if (!api)
-            return;
-        api.update(this.getOptions());
+    cd = inject(ChangeDetectorRef);
+    ngOnInit() {
+        const vals = injectStore$1(this._api().store, this.mode() === 'array'
+            ? (state) => {
+                return [
+                    state.meta,
+                    Object.keys(state.value ?? []).length,
+                ];
+            }
+            : undefined, {
+            injector: this.injector,
+        });
+        effect(() => {
+            // Load bearing change detection check
+            const _values = vals();
+            this.cd.markForCheck();
+        }, { injector: this.injector });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TanStackField, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.14", type: TanStackField, isStandalone: true, selector: "[tanstackField]", inputs: { name: "name", defaultValue: "defaultValue", asyncDebounceMs: ["asyncDebounceMs", "asyncDebounceMs", numberAttribute], asyncAlways: ["asyncAlways", "asyncAlways", booleanAttribute], tanstackField: "tanstackField", validators: "validators", listeners: "listeners", defaultMeta: "defaultMeta", disableErrorFlat: "disableErrorFlat" }, exportAs: ["field"], usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TanStackField, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: TanStackField, isStandalone: true, selector: "[tanstackField]", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, asyncDebounceMs: { classPropertyName: "asyncDebounceMs", publicName: "asyncDebounceMs", isSignal: true, isRequired: false, transformFunction: null }, asyncAlways: { classPropertyName: "asyncAlways", publicName: "asyncAlways", isSignal: true, isRequired: false, transformFunction: null }, tanstackField: { classPropertyName: "tanstackField", publicName: "tanstackField", isSignal: true, isRequired: true, transformFunction: null }, validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, listeners: { classPropertyName: "listeners", publicName: "listeners", isSignal: true, isRequired: false, transformFunction: null }, defaultMeta: { classPropertyName: "defaultMeta", publicName: "defaultMeta", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, disableErrorFlat: { classPropertyName: "disableErrorFlat", publicName: "disableErrorFlat", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["field"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TanStackField, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TanStackField, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tanstackField]',
                     standalone: true,
                     exportAs: 'field',
                 }]
-        }], propDecorators: { name: [{
-                type: Input,
-                args: [{ required: true }]
-            }], defaultValue: [{
-                type: Input
-            }], asyncDebounceMs: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], asyncAlways: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], tanstackField: [{
-                type: Input,
-                args: [{ required: true }]
-            }], validators: [{
-                type: Input
-            }], listeners: [{
-                type: Input
-            }], defaultMeta: [{
-                type: Input
-            }], disableErrorFlat: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [] });
+
+class TanStackFieldInjectable {
+    _api = signal(null);
+    get api() {
+        return this._api();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TanStackFieldInjectable, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TanStackFieldInjectable, providedIn: null });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TanStackFieldInjectable, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: null }]
+        }] });
+function injectField() {
+    return inject((TanStackFieldInjectable));
+}
+
+class TanStackAppField extends TanStackField {
+    base = inject(TanStackFieldInjectable);
+    constructor() {
+        super();
+        effect(() => {
+            this.base._api.set(this.api);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TanStackAppField, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.6", type: TanStackAppField, isStandalone: true, selector: "[tanstack-app-field]", providers: [TanStackFieldInjectable], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TanStackAppField, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tanstack-app-field]',
+                    standalone: true,
+                    providers: [TanStackFieldInjectable],
+                }]
+        }], ctorParameters: () => [] });
+
+function injectForm(opts) {
+    const api = new FormApi(opts);
+    injectStore$1(api.store, (state) => state.isSubmitting);
+    return api;
+}
 
 function injectStore(form, selector) {
     return injectStore$1(form.store, selector);
@@ -90,5 +128,5 @@ function injectStore(form, selector) {
  * Generated bundle index. Do not edit.
  */
 
-export { TanStackField, injectForm, injectStore };
+export { TanStackAppField, TanStackField, TanStackFieldInjectable, injectField, injectForm, injectStore };
 //# sourceMappingURL=tanstack-angular-form.mjs.map

package/dist/fesm2022/tanstack-angular-form.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tanstack-angular-form.mjs","sources":["../../src/inject-form.ts","../../src/tanstack-field.directive.ts","../../src/inject-store.ts","../../src/tanstack-angular-form.ts"],"sourcesContent":["import { FormApi } from '@tanstack/form-core'\nimport { injectStore } from '@tanstack/angular-store'\nimport type {\n  FormAsyncValidateOrFn,\n  FormOptions,\n  FormValidateOrFn,\n} from '@tanstack/form-core'\n\nexport function injectForm<\n  TFormData,\n  TOnMount extends undefined | FormValidateOrFn<TFormData>,\n  TOnChange extends undefined | FormValidateOrFn<TFormData>,\n  TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n  TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n  TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TSubmitMeta,\n>(\n  opts?: FormOptions<\n    TFormData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnServer,\n    TSubmitMeta\n  >,\n) {\n  const api = new FormApi<\n    TFormData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnServer,\n    TSubmitMeta\n  >(opts)\n\n  injectStore(api.store, (state) => state.isSubmitting)\n\n  return api\n}\n","import {\n  Directive,\n  Input,\n  booleanAttribute,\n  numberAttribute,\n} from '@angular/core'\nimport {\n  FieldApi,\n  FieldApiOptions,\n  FieldAsyncValidateOrFn,\n  FieldValidateOrFn,\n  FormApi,\n} from '@tanstack/form-core'\nimport type {\n  DeepKeys,\n  DeepValue,\n  FieldListeners,\n  FieldMeta,\n  FieldOptions,\n  FieldValidators,\n  FormAsyncValidateOrFn,\n  FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type { OnChanges, OnDestroy, OnInit } from '@angular/core'\n\n@Directive({\n  selector: '[tanstackField]',\n  standalone: true,\n  exportAs: 'field',\n})\nexport class TanStackField<\n    TParentData,\n    const TName extends DeepKeys<TParentData>,\n    TData extends DeepValue<TParentData, TName>,\n    TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n    TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n    TOnChangeAsync extends\n      | undefined\n      | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n    TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n    TOnBlurAsync extends\n      | undefined\n      | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n    TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n    TOnSubmitAsync extends\n      | undefined\n      | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n    TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n    TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n    TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n    TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n    TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n    TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n    TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n    TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n    TSubmitMeta,\n  >\n  implements\n    OnInit,\n    OnChanges,\n    OnDestroy,\n    FieldOptions<\n      TParentData,\n      TName,\n      TData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync\n    >\n{\n  @Input({ required: true }) name!: TName\n  @Input() defaultValue?: NoInfer<TData>\n  @Input({ transform: numberAttribute }) asyncDebounceMs?: number\n  @Input({ transform: booleanAttribute }) asyncAlways?: boolean\n  @Input({ required: true }) tanstackField!: FormApi<\n    TParentData,\n    TFormOnMount,\n    TFormOnChange,\n    TFormOnChangeAsync,\n    TFormOnBlur,\n    TFormOnBlurAsync,\n    TFormOnSubmit,\n    TFormOnSubmitAsync,\n    TFormOnServer,\n    TSubmitMeta\n  >\n  @Input() validators?: NoInfer<\n    FieldValidators<\n      TParentData,\n      TName,\n      TData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync\n    >\n  >\n  @Input() listeners?: NoInfer<FieldListeners<TParentData, TName, TData>>\n  @Input() defaultMeta?: Partial<\n    FieldMeta<\n      TParentData,\n      TName,\n      TData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TFormOnMount,\n      TFormOnChange,\n      TFormOnChangeAsync,\n      TFormOnBlur,\n      TFormOnBlurAsync,\n      TFormOnSubmit,\n      TFormOnSubmitAsync\n    >\n  >\n  @Input() disableErrorFlat?: boolean\n\n  api!: FieldApi<\n    TParentData,\n    TName,\n    TData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TFormOnMount,\n    TFormOnChange,\n    TFormOnChangeAsync,\n    TFormOnBlur,\n    TFormOnBlurAsync,\n    TFormOnSubmit,\n    TFormOnSubmitAsync,\n    TFormOnServer,\n    TSubmitMeta\n  >\n\n  private getOptions(): FieldApiOptions<\n    TParentData,\n    TName,\n    TData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TFormOnMount,\n    TFormOnChange,\n    TFormOnChangeAsync,\n    TFormOnBlur,\n    TFormOnBlurAsync,\n    TFormOnSubmit,\n    TFormOnSubmitAsync,\n    TFormOnServer,\n    TSubmitMeta\n  > {\n    return {\n      defaultValue: this.defaultValue,\n      asyncDebounceMs: this.asyncDebounceMs,\n      asyncAlways: this.asyncAlways,\n      disableErrorFlat: this.disableErrorFlat,\n      validators: this.validators,\n      listeners: this.listeners,\n      defaultMeta: this.defaultMeta,\n      name: this.name,\n      form: this.tanstackField,\n    }\n  }\n\n  unmount?: () => void\n\n  ngOnInit() {\n    this.api = new FieldApi(this.getOptions())\n\n    this.unmount = this.api.mount()\n  }\n\n  ngOnDestroy() {\n    this.unmount?.()\n  }\n\n  ngOnChanges() {\n    const api = this.api as typeof this.api | undefined\n    if (!api) return\n    api.update(this.getOptions())\n  }\n}\n","import { injectStore as injectAngularStore } from '@tanstack/angular-store'\nimport type {\n  FormApi,\n  FormAsyncValidateOrFn,\n  FormState,\n  FormValidateOrFn,\n} from '@tanstack/form-core'\n\nexport function injectStore<\n  TFormData,\n  TOnMount extends undefined | FormValidateOrFn<TFormData>,\n  TOnChange extends undefined | FormValidateOrFn<TFormData>,\n  TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n  TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n  TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TSubmitMeta,\n  TSelected = NoInfer<\n    FormState<\n      TFormData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TOnServer\n    >\n  >,\n>(\n  form: FormApi<\n    TFormData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnServer,\n    TSubmitMeta\n  >,\n  selector?: (\n    state: NoInfer<\n      FormState<\n        TFormData,\n        TOnMount,\n        TOnChange,\n        TOnChangeAsync,\n        TOnBlur,\n        TOnBlurAsync,\n        TOnSubmit,\n        TOnSubmitAsync,\n        TOnServer\n      >\n    >,\n  ) => TSelected,\n) {\n  return injectAngularStore(form.store, selector)\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["injectStore","injectAngularStore"],"mappings":"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"}
+{"version":3,"file":"tanstack-angular-form.mjs","sources":["../../src/tanstack-field.ts","../../src/injectable.ts","../../src/app-field.ts","../../src/inject-form.ts","../../src/inject-store.ts","../../src/tanstack-angular-form.ts"],"sourcesContent":["import {\n  ChangeDetectorRef,\n  Directive,\n  Injector,\n  OnInit,\n  booleanAttribute,\n  computed,\n  effect,\n  inject,\n  input,\n  numberAttribute,\n  untracked,\n} from '@angular/core'\nimport {\n  FieldApi,\n  FieldApiOptions,\n  FieldAsyncValidateOrFn,\n  FieldValidateOrFn,\n  FormApi,\n} from '@tanstack/form-core'\nimport { injectStore } from '@tanstack/angular-store'\nimport type {\n  DeepKeys,\n  DeepValue,\n  FieldListeners,\n  FieldMeta,\n  FieldValidators,\n  FormAsyncValidateOrFn,\n  FormValidateOrFn,\n} from '@tanstack/form-core'\n\n@Directive({\n  selector: '[tanstackField]',\n  standalone: true,\n  exportAs: 'field',\n})\nexport class TanStackField<\n  TParentData,\n  const TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TSubmitMeta,\n> implements OnInit\n{\n  name = input.required<TName>()\n  defaultValue = input<NoInfer<TData>>()\n  asyncDebounceMs = input(undefined as never as number, {\n    transform: numberAttribute,\n  })\n  asyncAlways = input(undefined as never as boolean, {\n    transform: booleanAttribute,\n  })\n  tanstackField =\n    input.required<\n      FormApi<\n        TParentData,\n        TFormOnMount,\n        TFormOnChange,\n        TFormOnChangeAsync,\n        TFormOnBlur,\n        TFormOnBlurAsync,\n        TFormOnSubmit,\n        TFormOnSubmitAsync,\n        TFormOnServer,\n        TSubmitMeta\n      >\n    >()\n\n  validators =\n    input<\n      NoInfer<\n        FieldValidators<\n          TParentData,\n          TName,\n          TData,\n          TOnMount,\n          TOnChange,\n          TOnChangeAsync,\n          TOnBlur,\n          TOnBlurAsync,\n          TOnSubmit,\n          TOnSubmitAsync\n        >\n      >\n    >()\n\n  listeners = input<NoInfer<FieldListeners<TParentData, TName, TData>>>()\n  defaultMeta =\n    input<\n      Partial<\n        FieldMeta<\n          TParentData,\n          TName,\n          TData,\n          TOnMount,\n          TOnChange,\n          TOnChangeAsync,\n          TOnBlur,\n          TOnBlurAsync,\n          TOnSubmit,\n          TOnSubmitAsync,\n          TFormOnMount,\n          TFormOnChange,\n          TFormOnChangeAsync,\n          TFormOnBlur,\n          TFormOnBlurAsync,\n          TFormOnSubmit,\n          TFormOnSubmitAsync\n        >\n      >\n    >()\n\n  mode = input<'value' | 'array'>()\n\n  disableErrorFlat = input<boolean>()\n\n  _api = computed(() => {\n    return new FieldApi(untracked(this.options))\n  })\n\n  get api(): FieldApi<\n    TParentData,\n    TName,\n    TData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TFormOnMount,\n    TFormOnChange,\n    TFormOnChangeAsync,\n    TFormOnBlur,\n    TFormOnBlurAsync,\n    TFormOnSubmit,\n    TFormOnSubmitAsync,\n    TFormOnServer,\n    TSubmitMeta\n  > {\n    return this._api()\n  }\n\n  options = computed(\n    () =>\n      ({\n        defaultValue: this.defaultValue(),\n        asyncDebounceMs: this.asyncDebounceMs(),\n        asyncAlways: this.asyncAlways(),\n        disableErrorFlat: this.disableErrorFlat(),\n        validators: this.validators(),\n        listeners: this.listeners(),\n        defaultMeta: this.defaultMeta(),\n        name: this.name(),\n        form: this.tanstackField(),\n      }) as FieldApiOptions<\n        TParentData,\n        TName,\n        TData,\n        TOnMount,\n        TOnChange,\n        TOnChangeAsync,\n        TOnBlur,\n        TOnBlurAsync,\n        TOnSubmit,\n        TOnSubmitAsync,\n        TFormOnMount,\n        TFormOnChange,\n        TFormOnChangeAsync,\n        TFormOnBlur,\n        TFormOnBlurAsync,\n        TFormOnSubmit,\n        TFormOnSubmitAsync,\n        TFormOnServer,\n        TSubmitMeta\n      >,\n  )\n\n  injector = inject(Injector)\n\n  constructor() {\n    effect((onCleanup) => {\n      const unmount = this._api().mount()\n\n      onCleanup(() => {\n        unmount()\n      })\n    })\n\n    effect(() => {\n      this._api().update(this.options())\n    })\n  }\n\n  cd = inject(ChangeDetectorRef)\n\n  ngOnInit() {\n    const vals = injectStore(\n      this._api().store,\n      this.mode() === 'array'\n        ? (state) => {\n            return [\n              state.meta,\n              Object.keys((state.value as unknown) ?? []).length,\n            ]\n          }\n        : undefined,\n      {\n        injector: this.injector,\n      },\n    )\n\n    effect(\n      () => {\n        // Load bearing change detection check\n        const _values = vals()\n        this.cd.markForCheck()\n      },\n      { injector: this.injector },\n    )\n  }\n}\n","import { Injectable, inject, signal } from '@angular/core'\nimport { FieldApi } from '@tanstack/form-core'\n\n@Injectable({ providedIn: null })\nexport class TanStackFieldInjectable<T> {\n  _api = signal<\n    FieldApi<\n      any,\n      any,\n      T,\n      any,\n      any,\n      any,\n      any,\n      any,\n      any,\n      any,\n      any,\n      any,\n      any,\n      any,\n      any,\n      any,\n      any,\n      any,\n      any\n    >\n  >(null as never)\n\n  get api() {\n    return this._api()\n  }\n}\n\nexport function injectField<T>(): TanStackFieldInjectable<T> {\n  return inject(TanStackFieldInjectable<T>)\n}\n","import { Directive, effect, inject } from '@angular/core'\nimport {\n  DeepKeys,\n  DeepValue,\n  FieldAsyncValidateOrFn,\n  FieldValidateOrFn,\n} from '@tanstack/form-core'\nimport { TanStackField } from './tanstack-field'\nimport { TanStackFieldInjectable } from './injectable'\nimport type {\n  FormAsyncValidateOrFn,\n  FormValidateOrFn,\n} from '@tanstack/form-core'\n\n@Directive({\n  selector: '[tanstack-app-field]',\n  standalone: true,\n  providers: [TanStackFieldInjectable],\n})\nexport class TanStackAppField<\n  TParentData,\n  const TName extends DeepKeys<TParentData>,\n  TData extends DeepValue<TParentData, TName>,\n  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnChangeAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnBlurAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n  TOnSubmitAsync extends\n    | undefined\n    | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n  TSubmitMeta,\n> extends TanStackField<\n  TParentData,\n  TName,\n  TData,\n  TOnMount,\n  TOnChange,\n  TOnChangeAsync,\n  TOnBlur,\n  TOnBlurAsync,\n  TOnSubmit,\n  TOnSubmitAsync,\n  TFormOnMount,\n  TFormOnChange,\n  TFormOnChangeAsync,\n  TFormOnBlur,\n  TFormOnBlurAsync,\n  TFormOnSubmit,\n  TFormOnSubmitAsync,\n  TFormOnServer,\n  TSubmitMeta\n> {\n  base = inject(TanStackFieldInjectable)\n\n  constructor() {\n    super()\n    effect(() => {\n      this.base._api.set(this.api)\n    })\n  }\n}\n","import { FormApi } from '@tanstack/form-core'\nimport { injectStore } from '@tanstack/angular-store'\nimport type {\n  FormAsyncValidateOrFn,\n  FormOptions,\n  FormValidateOrFn,\n} from '@tanstack/form-core'\n\nexport function injectForm<\n  TFormData,\n  TOnMount extends undefined | FormValidateOrFn<TFormData>,\n  TOnChange extends undefined | FormValidateOrFn<TFormData>,\n  TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n  TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n  TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TSubmitMeta,\n>(\n  opts?: FormOptions<\n    TFormData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnServer,\n    TSubmitMeta\n  >,\n) {\n  const api = new FormApi<\n    TFormData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnServer,\n    TSubmitMeta\n  >(opts)\n\n  injectStore(api.store, (state) => state.isSubmitting)\n\n  return api\n}\n","import { injectStore as injectAngularStore } from '@tanstack/angular-store'\nimport type {\n  FormApi,\n  FormAsyncValidateOrFn,\n  FormState,\n  FormValidateOrFn,\n} from '@tanstack/form-core'\n\nexport function injectStore<\n  TFormData,\n  TOnMount extends undefined | FormValidateOrFn<TFormData>,\n  TOnChange extends undefined | FormValidateOrFn<TFormData>,\n  TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n  TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n  TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n  TSubmitMeta,\n  TSelected = NoInfer<\n    FormState<\n      TFormData,\n      TOnMount,\n      TOnChange,\n      TOnChangeAsync,\n      TOnBlur,\n      TOnBlurAsync,\n      TOnSubmit,\n      TOnSubmitAsync,\n      TOnServer\n    >\n  >,\n>(\n  form: FormApi<\n    TFormData,\n    TOnMount,\n    TOnChange,\n    TOnChangeAsync,\n    TOnBlur,\n    TOnBlurAsync,\n    TOnSubmit,\n    TOnSubmitAsync,\n    TOnServer,\n    TSubmitMeta\n  >,\n  selector?: (\n    state: NoInfer<\n      FormState<\n        TFormData,\n        TOnMount,\n        TOnChange,\n        TOnChangeAsync,\n        TOnBlur,\n        TOnBlurAsync,\n        TOnSubmit,\n        TOnSubmitAsync,\n        TOnServer\n      >\n    >,\n  ) => TSelected,\n) {\n  return injectAngularStore(form.store, selector)\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["injectStore","injectAngularStore"],"mappings":"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"}

package/dist/index.d.ts

@@ -1,4 +1,47 @@
+import { DeepKeys, DeepValue, FieldValidateOrFn, FieldAsyncValidateOrFn, FormValidateOrFn, FormAsyncValidateOrFn, FormApi, FieldValidators, FieldListeners, FieldMeta, FieldApi, FieldApiOptions, FormOptions, FormState } from '@tanstack/form-core';
 export * from '@tanstack/form-core';
-export { injectForm } from './inject-form';
-export { TanStackField } from './tanstack-field.directive';
-export { injectStore } from './inject-store';
+import * as _angular_core from '@angular/core';
+import { OnInit, Injector, ChangeDetectorRef } from '@angular/core';
+
+declare class TanStackField<TParentData, const TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TSubmitMeta> implements OnInit {
+    name: _angular_core.InputSignal<TName>;
+    defaultValue: _angular_core.InputSignal<NoInfer<TData>>;
+    asyncDebounceMs: _angular_core.InputSignalWithTransform<number, unknown>;
+    asyncAlways: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    tanstackField: _angular_core.InputSignal<FormApi<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer, TSubmitMeta>>;
+    validators: _angular_core.InputSignal<NoInfer<FieldValidators<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync>>>;
+    listeners: _angular_core.InputSignal<NoInfer<FieldListeners<TParentData, TName, TData>>>;
+    defaultMeta: _angular_core.InputSignal<Partial<FieldMeta<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync>>>;
+    mode: _angular_core.InputSignal<"value" | "array">;
+    disableErrorFlat: _angular_core.InputSignal<boolean>;
+    _api: _angular_core.Signal<FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer, TSubmitMeta>>;
+    get api(): FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer, TSubmitMeta>;
+    options: _angular_core.Signal<FieldApiOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer, TSubmitMeta>>;
+    injector: Injector;
+    constructor();
+    cd: ChangeDetectorRef;
+    ngOnInit(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TanStackField<any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TanStackField<any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>, "[tanstackField]", ["field"], { "name": { "alias": "name"; "required": true; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "asyncDebounceMs": { "alias": "asyncDebounceMs"; "required": false; "isSignal": true; }; "asyncAlways": { "alias": "asyncAlways"; "required": false; "isSignal": true; }; "tanstackField": { "alias": "tanstackField"; "required": true; "isSignal": true; }; "validators": { "alias": "validators"; "required": false; "isSignal": true; }; "listeners": { "alias": "listeners"; "required": false; "isSignal": true; }; "defaultMeta": { "alias": "defaultMeta"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "disableErrorFlat": { "alias": "disableErrorFlat"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class TanStackFieldInjectable<T> {
+    _api: _angular_core.WritableSignal<FieldApi<any, any, T, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>>;
+    get api(): FieldApi<any, any, T, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TanStackFieldInjectable<any>, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<TanStackFieldInjectable<any>>;
+}
+declare function injectField<T>(): TanStackFieldInjectable<T>;
+
+declare class TanStackAppField<TParentData, const TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TSubmitMeta> extends TanStackField<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer, TSubmitMeta> {
+    base: TanStackFieldInjectable<any>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TanStackAppField<any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TanStackAppField<any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>, "[tanstack-app-field]", never, {}, {}, never, never, true, never>;
+}
+
+declare function injectForm<TFormData, TOnMount extends undefined | FormValidateOrFn<TFormData>, TOnChange extends undefined | FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta>(opts?: FormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta>): FormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta>;
+
+declare function injectStore<TFormData, TOnMount extends undefined | FormValidateOrFn<TFormData>, TOnChange extends undefined | FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta, TSelected = NoInfer<FormState<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer>>>(form: FormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta>, selector?: (state: NoInfer<FormState<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer>>) => TSelected): _angular_core.Signal<TSelected>;
+
+export { TanStackAppField, TanStackField, TanStackFieldInjectable, injectField, injectForm, injectStore };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/angular-form",
-  "version": "1.12.3",
+  "version": "1.13.0",
   "description": "Powerful, type-safe forms for Angular.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -34,20 +34,22 @@
   "dependencies": {
     "@tanstack/angular-store": "^0.7.1",
     "tslib": "^2.8.1",
-    "@tanstack/form-core": "1.12.3"
+    "@tanstack/form-core": "1.12.4"
   },
   "devDependencies": {
     "@analogjs/vite-plugin-angular": "^1.17.1",
-    "@angular/common": "^19.2.14",
-    "@angular/compiler": "^19.2.14",
-    "@angular/compiler-cli": "^19.2.14",
-    "@angular/core": "^19.2.14",
-    "@angular/platform-browser": "^19.2.14",
-    "@angular/platform-browser-dynamic": "^19.2.14",
+    "@analogjs/vitest-angular": "^1.17.1",
+    "@angular/common": "^20.0.0",
+    "@angular/compiler": "^20.0.0",
+    "@angular/compiler-cli": "^20.0.0",
+    "@angular/core": "^20.0.0",
+    "@angular/platform-browser": "^20.0.0",
+    "@angular/platform-browser-dynamic": "^20.0.0",
     "@testing-library/angular": "^17.4.0",
-    "ng-packagr": "^19.2.2",
+    "ng-packagr": "^20.0.0",
     "typescript": "5.8.2",
-    "zone.js": "^0.15.1"
+    "vite-tsconfig-paths": "^5.1.4",
+    "zone.js": "0.15.1"
   },
   "peerDependencies": {
     "@angular/core": ">=19.0.0"

package/src/app-field.ts

@@ -0,0 +1,75 @@
+import { Directive, effect, inject } from '@angular/core'
+import {
+  DeepKeys,
+  DeepValue,
+  FieldAsyncValidateOrFn,
+  FieldValidateOrFn,
+} from '@tanstack/form-core'
+import { TanStackField } from './tanstack-field'
+import { TanStackFieldInjectable } from './injectable'
+import type {
+  FormAsyncValidateOrFn,
+  FormValidateOrFn,
+} from '@tanstack/form-core'
+
+@Directive({
+  selector: '[tanstack-app-field]',
+  standalone: true,
+  providers: [TanStackFieldInjectable],
+})
+export class TanStackAppField<
+  TParentData,
+  const TName extends DeepKeys<TParentData>,
+  TData extends DeepValue<TParentData, TName>,
+  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+  TOnChangeAsync extends
+    | undefined
+    | FieldAsyncValidateOrFn<TParentData, TName, TData>,
+  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+  TOnBlurAsync extends
+    | undefined
+    | FieldAsyncValidateOrFn<TParentData, TName, TData>,
+  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+  TOnSubmitAsync extends
+    | undefined
+    | FieldAsyncValidateOrFn<TParentData, TName, TData>,
+  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
+  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
+  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
+  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
+  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
+  TSubmitMeta,
+> extends TanStackField<
+  TParentData,
+  TName,
+  TData,
+  TOnMount,
+  TOnChange,
+  TOnChangeAsync,
+  TOnBlur,
+  TOnBlurAsync,
+  TOnSubmit,
+  TOnSubmitAsync,
+  TFormOnMount,
+  TFormOnChange,
+  TFormOnChangeAsync,
+  TFormOnBlur,
+  TFormOnBlurAsync,
+  TFormOnSubmit,
+  TFormOnSubmitAsync,
+  TFormOnServer,
+  TSubmitMeta
+> {
+  base = inject(TanStackFieldInjectable)
+
+  constructor() {
+    super()
+    effect(() => {
+      this.base._api.set(this.api)
+    })
+  }
+}

package/src/index.ts

@@ -1,5 +1,7 @@
 export * from '@tanstack/form-core'
 
+export { TanStackAppField } from './app-field'
 export { injectForm } from './inject-form'
-export { TanStackField } from './tanstack-field.directive'
+export { TanStackField } from './tanstack-field'
 export { injectStore } from './inject-store'
+export { TanStackFieldInjectable, injectField } from './injectable'

package/src/injectable.ts

@@ -0,0 +1,37 @@
+import { Injectable, inject, signal } from '@angular/core'
+import { FieldApi } from '@tanstack/form-core'
+
+@Injectable({ providedIn: null })
+export class TanStackFieldInjectable<T> {
+  _api = signal<
+    FieldApi<
+      any,
+      any,
+      T,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any,
+      any
+    >
+  >(null as never)
+
+  get api() {
+    return this._api()
+  }
+}
+
+export function injectField<T>(): TanStackFieldInjectable<T> {
+  return inject(TanStackFieldInjectable<T>)
+}

package/src/tanstack-field.ts

@@ -0,0 +1,243 @@
+import {
+  ChangeDetectorRef,
+  Directive,
+  Injector,
+  OnInit,
+  booleanAttribute,
+  computed,
+  effect,
+  inject,
+  input,
+  numberAttribute,
+  untracked,
+} from '@angular/core'
+import {
+  FieldApi,
+  FieldApiOptions,
+  FieldAsyncValidateOrFn,
+  FieldValidateOrFn,
+  FormApi,
+} from '@tanstack/form-core'
+import { injectStore } from '@tanstack/angular-store'
+import type {
+  DeepKeys,
+  DeepValue,
+  FieldListeners,
+  FieldMeta,
+  FieldValidators,
+  FormAsyncValidateOrFn,
+  FormValidateOrFn,
+} from '@tanstack/form-core'
+
+@Directive({
+  selector: '[tanstackField]',
+  standalone: true,
+  exportAs: 'field',
+})
+export class TanStackField<
+  TParentData,
+  const TName extends DeepKeys<TParentData>,
+  TData extends DeepValue<TParentData, TName>,
+  TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+  TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+  TOnChangeAsync extends
+    | undefined
+    | FieldAsyncValidateOrFn<TParentData, TName, TData>,
+  TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+  TOnBlurAsync extends
+    | undefined
+    | FieldAsyncValidateOrFn<TParentData, TName, TData>,
+  TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
+  TOnSubmitAsync extends
+    | undefined
+    | FieldAsyncValidateOrFn<TParentData, TName, TData>,
+  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
+  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
+  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
+  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
+  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
+  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
+  TSubmitMeta,
+> implements OnInit
+{
+  name = input.required<TName>()
+  defaultValue = input<NoInfer<TData>>()
+  asyncDebounceMs = input(undefined as never as number, {
+    transform: numberAttribute,
+  })
+  asyncAlways = input(undefined as never as boolean, {
+    transform: booleanAttribute,
+  })
+  tanstackField =
+    input.required<
+      FormApi<
+        TParentData,
+        TFormOnMount,
+        TFormOnChange,
+        TFormOnChangeAsync,
+        TFormOnBlur,
+        TFormOnBlurAsync,
+        TFormOnSubmit,
+        TFormOnSubmitAsync,
+        TFormOnServer,
+        TSubmitMeta
+      >
+    >()
+
+  validators =
+    input<
+      NoInfer<
+        FieldValidators<
+          TParentData,
+          TName,
+          TData,
+          TOnMount,
+          TOnChange,
+          TOnChangeAsync,
+          TOnBlur,
+          TOnBlurAsync,
+          TOnSubmit,
+          TOnSubmitAsync
+        >
+      >
+    >()
+
+  listeners = input<NoInfer<FieldListeners<TParentData, TName, TData>>>()
+  defaultMeta =
+    input<
+      Partial<
+        FieldMeta<
+          TParentData,
+          TName,
+          TData,
+          TOnMount,
+          TOnChange,
+          TOnChangeAsync,
+          TOnBlur,
+          TOnBlurAsync,
+          TOnSubmit,
+          TOnSubmitAsync,
+          TFormOnMount,
+          TFormOnChange,
+          TFormOnChangeAsync,
+          TFormOnBlur,
+          TFormOnBlurAsync,
+          TFormOnSubmit,
+          TFormOnSubmitAsync
+        >
+      >
+    >()
+
+  mode = input<'value' | 'array'>()
+
+  disableErrorFlat = input<boolean>()
+
+  _api = computed(() => {
+    return new FieldApi(untracked(this.options))
+  })
+
+  get api(): FieldApi<
+    TParentData,
+    TName,
+    TData,
+    TOnMount,
+    TOnChange,
+    TOnChangeAsync,
+    TOnBlur,
+    TOnBlurAsync,
+    TOnSubmit,
+    TOnSubmitAsync,
+    TFormOnMount,
+    TFormOnChange,
+    TFormOnChangeAsync,
+    TFormOnBlur,
+    TFormOnBlurAsync,
+    TFormOnSubmit,
+    TFormOnSubmitAsync,
+    TFormOnServer,
+    TSubmitMeta
+  > {
+    return this._api()
+  }
+
+  options = computed(
+    () =>
+      ({
+        defaultValue: this.defaultValue(),
+        asyncDebounceMs: this.asyncDebounceMs(),
+        asyncAlways: this.asyncAlways(),
+        disableErrorFlat: this.disableErrorFlat(),
+        validators: this.validators(),
+        listeners: this.listeners(),
+        defaultMeta: this.defaultMeta(),
+        name: this.name(),
+        form: this.tanstackField(),
+      }) as FieldApiOptions<
+        TParentData,
+        TName,
+        TData,
+        TOnMount,
+        TOnChange,
+        TOnChangeAsync,
+        TOnBlur,
+        TOnBlurAsync,
+        TOnSubmit,
+        TOnSubmitAsync,
+        TFormOnMount,
+        TFormOnChange,
+        TFormOnChangeAsync,
+        TFormOnBlur,
+        TFormOnBlurAsync,
+        TFormOnSubmit,
+        TFormOnSubmitAsync,
+        TFormOnServer,
+        TSubmitMeta
+      >,
+  )
+
+  injector = inject(Injector)
+
+  constructor() {
+    effect((onCleanup) => {
+      const unmount = this._api().mount()
+
+      onCleanup(() => {
+        unmount()
+      })
+    })
+
+    effect(() => {
+      this._api().update(this.options())
+    })
+  }
+
+  cd = inject(ChangeDetectorRef)
+
+  ngOnInit() {
+    const vals = injectStore(
+      this._api().store,
+      this.mode() === 'array'
+        ? (state) => {
+            return [
+              state.meta,
+              Object.keys((state.value as unknown) ?? []).length,
+            ]
+          }
+        : undefined,
+      {
+        injector: this.injector,
+      },
+    )
+
+    effect(
+      () => {
+        // Load bearing change detection check
+        const _values = vals()
+        this.cd.markForCheck()
+      },
+      { injector: this.injector },
+    )
+  }
+}

package/dist/inject-form.d.ts

@@ -1,3 +0,0 @@
-import { FormApi } from '@tanstack/form-core';
-import type { FormAsyncValidateOrFn, FormOptions, FormValidateOrFn } from '@tanstack/form-core';
-export declare function injectForm<TFormData, TOnMount extends undefined | FormValidateOrFn<TFormData>, TOnChange extends undefined | FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta>(opts?: FormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta>): FormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta>;

package/dist/inject-store.d.ts

@@ -1,2 +0,0 @@
-import type { FormApi, FormAsyncValidateOrFn, FormState, FormValidateOrFn } from '@tanstack/form-core';
-export declare function injectStore<TFormData, TOnMount extends undefined | FormValidateOrFn<TFormData>, TOnChange extends undefined | FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta, TSelected = NoInfer<FormState<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer>>>(form: FormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta>, selector?: (state: NoInfer<FormState<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer>>) => TSelected): import("@angular/core").Signal<TSelected>;

package/dist/tanstack-field.directive.d.ts

@@ -1,25 +0,0 @@
-import { FieldApi, FieldAsyncValidateOrFn, FieldValidateOrFn, FormApi } from '@tanstack/form-core';
-import type { DeepKeys, DeepValue, FieldListeners, FieldMeta, FieldOptions, FieldValidators, FormAsyncValidateOrFn, FormValidateOrFn } from '@tanstack/form-core';
-import type { OnChanges, OnDestroy, OnInit } from '@angular/core';
-import * as i0 from "@angular/core";
-export declare class TanStackField<TParentData, const TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TSubmitMeta> implements OnInit, OnChanges, OnDestroy, FieldOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync> {
-    name: TName;
-    defaultValue?: NoInfer<TData>;
-    asyncDebounceMs?: number;
-    asyncAlways?: boolean;
-    tanstackField: FormApi<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer, TSubmitMeta>;
-    validators?: NoInfer<FieldValidators<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync>>;
-    listeners?: NoInfer<FieldListeners<TParentData, TName, TData>>;
-    defaultMeta?: Partial<FieldMeta<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync>>;
-    disableErrorFlat?: boolean;
-    api: FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnServer, TSubmitMeta>;
-    private getOptions;
-    unmount?: () => void;
-    ngOnInit(): void;
-    ngOnDestroy(): void;
-    ngOnChanges(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<TanStackField<any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TanStackField<any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>, "[tanstackField]", ["field"], { "name": { "alias": "name"; "required": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; }; "asyncDebounceMs": { "alias": "asyncDebounceMs"; "required": false; }; "asyncAlways": { "alias": "asyncAlways"; "required": false; }; "tanstackField": { "alias": "tanstackField"; "required": true; }; "validators": { "alias": "validators"; "required": false; }; "listeners": { "alias": "listeners"; "required": false; }; "defaultMeta": { "alias": "defaultMeta"; "required": false; }; "disableErrorFlat": { "alias": "disableErrorFlat"; "required": false; }; }, {}, never, never, true, never>;
-    static ngAcceptInputType_asyncDebounceMs: unknown;
-    static ngAcceptInputType_asyncAlways: unknown;
-}

package/src/tanstack-field.directive.ts

@@ -1,202 +0,0 @@
-import {
-  Directive,
-  Input,
-  booleanAttribute,
-  numberAttribute,
-} from '@angular/core'
-import {
-  FieldApi,
-  FieldApiOptions,
-  FieldAsyncValidateOrFn,
-  FieldValidateOrFn,
-  FormApi,
-} from '@tanstack/form-core'
-import type {
-  DeepKeys,
-  DeepValue,
-  FieldListeners,
-  FieldMeta,
-  FieldOptions,
-  FieldValidators,
-  FormAsyncValidateOrFn,
-  FormValidateOrFn,
-} from '@tanstack/form-core'
-import type { OnChanges, OnDestroy, OnInit } from '@angular/core'
-
-@Directive({
-  selector: '[tanstackField]',
-  standalone: true,
-  exportAs: 'field',
-})
-export class TanStackField<
-    TParentData,
-    const TName extends DeepKeys<TParentData>,
-    TData extends DeepValue<TParentData, TName>,
-    TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
-    TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
-    TOnChangeAsync extends
-      | undefined
-      | FieldAsyncValidateOrFn<TParentData, TName, TData>,
-    TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
-    TOnBlurAsync extends
-      | undefined
-      | FieldAsyncValidateOrFn<TParentData, TName, TData>,
-    TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,
-    TOnSubmitAsync extends
-      | undefined
-      | FieldAsyncValidateOrFn<TParentData, TName, TData>,
-    TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
-    TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
-    TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
-    TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
-    TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
-    TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
-    TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
-    TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
-    TSubmitMeta,
-  >
-  implements
-    OnInit,
-    OnChanges,
-    OnDestroy,
-    FieldOptions<
-      TParentData,
-      TName,
-      TData,
-      TOnMount,
-      TOnChange,
-      TOnChangeAsync,
-      TOnBlur,
-      TOnBlurAsync,
-      TOnSubmit,
-      TOnSubmitAsync
-    >
-{
-  @Input({ required: true }) name!: TName
-  @Input() defaultValue?: NoInfer<TData>
-  @Input({ transform: numberAttribute }) asyncDebounceMs?: number
-  @Input({ transform: booleanAttribute }) asyncAlways?: boolean
-  @Input({ required: true }) tanstackField!: FormApi<
-    TParentData,
-    TFormOnMount,
-    TFormOnChange,
-    TFormOnChangeAsync,
-    TFormOnBlur,
-    TFormOnBlurAsync,
-    TFormOnSubmit,
-    TFormOnSubmitAsync,
-    TFormOnServer,
-    TSubmitMeta
-  >
-  @Input() validators?: NoInfer<
-    FieldValidators<
-      TParentData,
-      TName,
-      TData,
-      TOnMount,
-      TOnChange,
-      TOnChangeAsync,
-      TOnBlur,
-      TOnBlurAsync,
-      TOnSubmit,
-      TOnSubmitAsync
-    >
-  >
-  @Input() listeners?: NoInfer<FieldListeners<TParentData, TName, TData>>
-  @Input() defaultMeta?: Partial<
-    FieldMeta<
-      TParentData,
-      TName,
-      TData,
-      TOnMount,
-      TOnChange,
-      TOnChangeAsync,
-      TOnBlur,
-      TOnBlurAsync,
-      TOnSubmit,
-      TOnSubmitAsync,
-      TFormOnMount,
-      TFormOnChange,
-      TFormOnChangeAsync,
-      TFormOnBlur,
-      TFormOnBlurAsync,
-      TFormOnSubmit,
-      TFormOnSubmitAsync
-    >
-  >
-  @Input() disableErrorFlat?: boolean
-
-  api!: FieldApi<
-    TParentData,
-    TName,
-    TData,
-    TOnMount,
-    TOnChange,
-    TOnChangeAsync,
-    TOnBlur,
-    TOnBlurAsync,
-    TOnSubmit,
-    TOnSubmitAsync,
-    TFormOnMount,
-    TFormOnChange,
-    TFormOnChangeAsync,
-    TFormOnBlur,
-    TFormOnBlurAsync,
-    TFormOnSubmit,
-    TFormOnSubmitAsync,
-    TFormOnServer,
-    TSubmitMeta
-  >
-
-  private getOptions(): FieldApiOptions<
-    TParentData,
-    TName,
-    TData,
-    TOnMount,
-    TOnChange,
-    TOnChangeAsync,
-    TOnBlur,
-    TOnBlurAsync,
-    TOnSubmit,
-    TOnSubmitAsync,
-    TFormOnMount,
-    TFormOnChange,
-    TFormOnChangeAsync,
-    TFormOnBlur,
-    TFormOnBlurAsync,
-    TFormOnSubmit,
-    TFormOnSubmitAsync,
-    TFormOnServer,
-    TSubmitMeta
-  > {
-    return {
-      defaultValue: this.defaultValue,
-      asyncDebounceMs: this.asyncDebounceMs,
-      asyncAlways: this.asyncAlways,
-      disableErrorFlat: this.disableErrorFlat,
-      validators: this.validators,
-      listeners: this.listeners,
-      defaultMeta: this.defaultMeta,
-      name: this.name,
-      form: this.tanstackField,
-    }
-  }
-
-  unmount?: () => void
-
-  ngOnInit() {
-    this.api = new FieldApi(this.getOptions())
-
-    this.unmount = this.api.mount()
-  }
-
-  ngOnDestroy() {
-    this.unmount?.()
-  }
-
-  ngOnChanges() {
-    const api = this.api as typeof this.api | undefined
-    if (!api) return
-    api.update(this.getOptions())
-  }
-}