@tanstack/angular-form 0.17.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-present Tanner Linsley
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,35 @@
+<img src="https://static.scarf.sh/a.png?x-pxid=be2d8a11-9712-4c1d-9963-580b2d4fb133" />
+
+![TanStack Form Header](https://github.com/TanStack/form/raw/main/media/repo-header.png)
+
+Directives for managing form state in Angular
+
+<a href="https://twitter.com/intent/tweet?button_hashtag=TanStack" target="\_parent">
+  <img alt="#TanStack" src="https://img.shields.io/twitter/url?color=%2308a0e9&label=%23TanStack&style=social&url=https%3A%2F%2Ftwitter.com%2Fintent%2Ftweet%3Fbutton_hashtag%3DTanStack">
+</a><a href="https://discord.com/invite/WrRKjPJ" target="\_parent">
+  <img alt="" src="https://img.shields.io/badge/Discord-TanStack-%235865F2" />
+</a><a href="https://github.com/TanStack/form/actions?query=workflow%3A%22angular-form+tests%22">
+<img src="https://github.com/TanStack/form/workflows/angular-form%20tests/badge.svg" />
+</a><a href="https://www.npmjs.com/package/@tanstack/form-core" target="\_parent">
+  <img alt="" src="https://img.shields.io/npm/dm/@tanstack/form-core.svg" />
+</a><a href="https://bundlephobia.com/package/@tanstack/angular-form@latest" target="\_parent">
+  <img alt="" src="https://badgen.net/bundlephobia/minzip/@tanstack/angular-form" />
+</a><a href="#badge">
+    <img alt="semantic-release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg">
+  </a><a href="https://github.com/TanStack/form/discussions">
+  <img alt="Join the discussion on Github" src="https://img.shields.io/badge/Github%20Discussions%20%26%20Support-Chat%20now!-blue" />
+</a><a href="https://bestofjs.org/projects/tanstack-form"><img alt="Best of JS" src="https://img.shields.io/endpoint?url=https://bestofjs-serverless.now.sh/api/project-badge?fullName=TanStack%form%26since=daily" /></a><a href="https://github.com/TanStack/form/" target="\_parent">
+  <img alt="" src="https://img.shields.io/github/stars/TanStack/form.svg?style=social&label=Star" />
+</a><a href="https://twitter.com/tannerlinsley" target="\_parent">
+  <img alt="" src="https://img.shields.io/twitter/follow/tannerlinsley.svg?style=social&label=Follow" />
+</a> <a href="https://gitpod.io/from-referrer/">
+  <img src="https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod" alt="Gitpod Ready-to-Code"/>
+</a>
+
+Enjoy this library? Try the entire [TanStack](https://tanstack.com)! [TanStack Table](https://github.com/TanStack/table), [TanStack Router](https://github.com/tanstack/router), [TanStack Virtual](https://github.com/tanstack/virtual), [React Charts](https://github.com/TanStack/react-charts), [React Ranger](https://github.com/TanStack/ranger)
+
+## Visit [tanstack.com/form](https://tanstack.com/form) for docs, guides, API and more!
+
+### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
+
+<!-- Use the force, Luke -->

package/build/README.md

@@ -0,0 +1,35 @@
+<img src="https://static.scarf.sh/a.png?x-pxid=be2d8a11-9712-4c1d-9963-580b2d4fb133" />
+
+![TanStack Form Header](https://github.com/TanStack/form/raw/main/media/repo-header.png)
+
+Directives for managing form state in Angular
+
+<a href="https://twitter.com/intent/tweet?button_hashtag=TanStack" target="\_parent">
+  <img alt="#TanStack" src="https://img.shields.io/twitter/url?color=%2308a0e9&label=%23TanStack&style=social&url=https%3A%2F%2Ftwitter.com%2Fintent%2Ftweet%3Fbutton_hashtag%3DTanStack">
+</a><a href="https://discord.com/invite/WrRKjPJ" target="\_parent">
+  <img alt="" src="https://img.shields.io/badge/Discord-TanStack-%235865F2" />
+</a><a href="https://github.com/TanStack/form/actions?query=workflow%3A%22angular-form+tests%22">
+<img src="https://github.com/TanStack/form/workflows/angular-form%20tests/badge.svg" />
+</a><a href="https://www.npmjs.com/package/@tanstack/form-core" target="\_parent">
+  <img alt="" src="https://img.shields.io/npm/dm/@tanstack/form-core.svg" />
+</a><a href="https://bundlephobia.com/package/@tanstack/angular-form@latest" target="\_parent">
+  <img alt="" src="https://badgen.net/bundlephobia/minzip/@tanstack/angular-form" />
+</a><a href="#badge">
+    <img alt="semantic-release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg">
+  </a><a href="https://github.com/TanStack/form/discussions">
+  <img alt="Join the discussion on Github" src="https://img.shields.io/badge/Github%20Discussions%20%26%20Support-Chat%20now!-blue" />
+</a><a href="https://bestofjs.org/projects/tanstack-form"><img alt="Best of JS" src="https://img.shields.io/endpoint?url=https://bestofjs-serverless.now.sh/api/project-badge?fullName=TanStack%form%26since=daily" /></a><a href="https://github.com/TanStack/form/" target="\_parent">
+  <img alt="" src="https://img.shields.io/github/stars/TanStack/form.svg?style=social&label=Star" />
+</a><a href="https://twitter.com/tannerlinsley" target="\_parent">
+  <img alt="" src="https://img.shields.io/twitter/follow/tannerlinsley.svg?style=social&label=Follow" />
+</a> <a href="https://gitpod.io/from-referrer/">
+  <img src="https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod" alt="Gitpod Ready-to-Code"/>
+</a>
+
+Enjoy this library? Try the entire [TanStack](https://tanstack.com)! [TanStack Table](https://github.com/TanStack/table), [TanStack Router](https://github.com/tanstack/router), [TanStack Virtual](https://github.com/tanstack/virtual), [React Charts](https://github.com/TanStack/react-charts), [React Ranger](https://github.com/TanStack/ranger)
+
+## Visit [tanstack.com/form](https://tanstack.com/form) for docs, guides, API and more!
+
+### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
+
+<!-- Use the force, Luke -->

package/build/esm2022/index.mjs

@@ -0,0 +1,4 @@
+export { injectForm } from './inject-form';
+export { TanStackField } from './tanstack-field.directive';
+export { injectStore } from './inject-store';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBT0EsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGVBQWUsQ0FBQTtBQUMxQyxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sNEJBQTRCLENBQUE7QUFDMUQsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGdCQUFnQixDQUFBIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IHR5cGUge1xuICBGaWVsZEFwaSxcbiAgRm9ybU9wdGlvbnMsXG4gIEZpZWxkU3RhdGUsXG4gIEZpZWxkVmFsaWRhdGVGbixcbiAgRmllbGRWYWxpZGF0ZUFzeW5jRm4sXG59IGZyb20gJ0B0YW5zdGFjay9mb3JtLWNvcmUnXG5leHBvcnQgeyBpbmplY3RGb3JtIH0gZnJvbSAnLi9pbmplY3QtZm9ybSdcbmV4cG9ydCB7IFRhblN0YWNrRmllbGQgfSBmcm9tICcuL3RhbnN0YWNrLWZpZWxkLmRpcmVjdGl2ZSdcbmV4cG9ydCB7IGluamVjdFN0b3JlIH0gZnJvbSAnLi9pbmplY3Qtc3RvcmUnXG4iXX0=

package/build/esm2022/inject-form.mjs

@@ -0,0 +1,8 @@
+import { FormApi } from '@tanstack/form-core';
+import { injectStore } from '@tanstack/angular-store';
+export function injectForm(opts) {
+    const api = new FormApi(opts);
+    injectStore(api.store, (state) => state.isSubmitting);
+    return api;
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5qZWN0LWZvcm0uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvaW5qZWN0LWZvcm0udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLE9BQU8sRUFBb0MsTUFBTSxxQkFBcUIsQ0FBQTtBQUMvRSxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0seUJBQXlCLENBQUE7QUFFckQsTUFBTSxVQUFVLFVBQVUsQ0FHeEIsSUFBNkM7SUFDN0MsTUFBTSxHQUFHLEdBQUcsSUFBSSxPQUFPLENBQTRCLElBQUksQ0FBQyxDQUFBO0lBRXhELFdBQVcsQ0FBQyxHQUFHLENBQUMsS0FBSyxFQUFFLENBQUMsS0FBSyxFQUFFLEVBQUUsQ0FBQyxLQUFLLENBQUMsWUFBWSxDQUFDLENBQUE7SUFFckQsT0FBTyxHQUFHLENBQUE7QUFDWixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRm9ybUFwaSwgdHlwZSBGb3JtT3B0aW9ucywgdHlwZSBWYWxpZGF0b3IgfSBmcm9tICdAdGFuc3RhY2svZm9ybS1jb3JlJ1xuaW1wb3J0IHsgaW5qZWN0U3RvcmUgfSBmcm9tICdAdGFuc3RhY2svYW5ndWxhci1zdG9yZSdcblxuZXhwb3J0IGZ1bmN0aW9uIGluamVjdEZvcm08XG4gIFRGb3JtRGF0YSxcbiAgVEZvcm1WYWxpZGF0b3IgZXh0ZW5kcyBWYWxpZGF0b3I8VEZvcm1EYXRhLCB1bmtub3duPiB8IHVuZGVmaW5lZCA9IHVuZGVmaW5lZCxcbj4ob3B0cz86IEZvcm1PcHRpb25zPFRGb3JtRGF0YSwgVEZvcm1WYWxpZGF0b3I+KSB7XG4gIGNvbnN0IGFwaSA9IG5ldyBGb3JtQXBpPFRGb3JtRGF0YSwgVEZvcm1WYWxpZGF0b3I+KG9wdHMpXG5cbiAgaW5qZWN0U3RvcmUoYXBpLnN0b3JlLCAoc3RhdGUpID0+IHN0YXRlLmlzU3VibWl0dGluZylcblxuICByZXR1cm4gYXBpXG59XG4iXX0=

package/build/esm2022/inject-store.mjs

@@ -0,0 +1,5 @@
+import { injectStore as injectAngularStore } from '@tanstack/angular-store';
+export function injectStore(form, selector) {
+    return injectAngularStore(form.store, selector);
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5qZWN0LXN0b3JlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL2luamVjdC1zdG9yZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsV0FBVyxJQUFJLGtCQUFrQixFQUFFLE1BQU0seUJBQXlCLENBQUE7QUFHM0UsTUFBTSxVQUFVLFdBQVcsQ0FLekIsSUFBd0MsRUFDeEMsUUFBOEQ7SUFFOUQsT0FBTyxrQkFBa0IsQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFLFFBQVEsQ0FBQyxDQUFBO0FBQ2pELENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBpbmplY3RTdG9yZSBhcyBpbmplY3RBbmd1bGFyU3RvcmUgfSBmcm9tICdAdGFuc3RhY2svYW5ndWxhci1zdG9yZSdcbmltcG9ydCB0eXBlIHsgRm9ybUFwaSwgRm9ybVN0YXRlLCBWYWxpZGF0b3IgfSBmcm9tICdAdGFuc3RhY2svZm9ybS1jb3JlJ1xuXG5leHBvcnQgZnVuY3Rpb24gaW5qZWN0U3RvcmU8XG4gIFRGb3JtRGF0YSxcbiAgVEZvcm1WYWxpZGF0b3IgZXh0ZW5kcyBWYWxpZGF0b3I8VEZvcm1EYXRhLCB1bmtub3duPiB8IHVuZGVmaW5lZCA9IHVuZGVmaW5lZCxcbiAgVFNlbGVjdGVkID0gTm9JbmZlcjxGb3JtU3RhdGU8VEZvcm1EYXRhPj4sXG4+KFxuICBmb3JtOiBGb3JtQXBpPFRGb3JtRGF0YSwgVEZvcm1WYWxpZGF0b3I+LFxuICBzZWxlY3Rvcj86IChzdGF0ZTogTm9JbmZlcjxGb3JtU3RhdGU8VEZvcm1EYXRhPj4pID0+IFRTZWxlY3RlZCxcbikge1xuICByZXR1cm4gaW5qZWN0QW5ndWxhclN0b3JlKGZvcm0uc3RvcmUsIHNlbGVjdG9yKVxufVxuIl19

package/build/esm2022/tanstack-angular-form.mjs

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFuc3RhY2stYW5ndWxhci1mb3JtLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL3RhbnN0YWNrLWFuZ3VsYXItZm9ybS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsU0FBUyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2luZGV4JztcbiJdfQ==

package/build/esm2022/tanstack-field.directive.mjs

@@ -0,0 +1,76 @@
+import { Directive, Input, } from '@angular/core';
+import { FieldApi, } from '@tanstack/form-core';
+import * as i0 from "@angular/core";
+export class TanStackField {
+    name;
+    // Setting as NoInferHack as it's the same internal type cast as TanStack Form Core
+    // This can be removed when TanStack Form Core is moved to TS min of 5.4
+    // and the NoInfer internal util type is rm-rf'd
+    defaultValue;
+    asyncDebounceMs;
+    asyncAlways;
+    preserveValue;
+    validatorAdapter;
+    tanstackField;
+    validators;
+    defaultMeta;
+    api;
+    getOptions() {
+        return {
+            defaultValue: this.defaultValue,
+            asyncDebounceMs: this.asyncDebounceMs,
+            asyncAlways: this.asyncAlways,
+            preserveValue: this.preserveValue,
+            validatorAdapter: this.validatorAdapter,
+            validators: this.validators,
+            defaultMeta: this.defaultMeta,
+            name: this.name,
+            form: this.tanstackField,
+        };
+    }
+    unmount;
+    ngOnInit() {
+        this.api = new FieldApi(this.getOptions());
+        this.unmount = this.api.mount();
+    }
+    ngOnDestroy() {
+        this.unmount?.();
+    }
+    ngOnChanges() {
+        const api = this.api;
+        if (!api)
+            return;
+        api.update(this.getOptions());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TanStackField, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: TanStackField, isStandalone: true, selector: "[tanstackField]", inputs: { name: "name", defaultValue: "defaultValue", asyncDebounceMs: "asyncDebounceMs", asyncAlways: "asyncAlways", preserveValue: "preserveValue", validatorAdapter: "validatorAdapter", tanstackField: "tanstackField", validators: "validators", defaultMeta: "defaultMeta" }, exportAs: ["field"], usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", 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
+            }], asyncAlways: [{
+                type: Input
+            }], preserveValue: [{
+                type: Input
+            }], validatorAdapter: [{
+                type: Input
+            }], tanstackField: [{
+                type: Input,
+                args: [{ required: true }]
+            }], validators: [{
+                type: Input
+            }], defaultMeta: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFuc3RhY2stZmllbGQuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL3RhbnN0YWNrLWZpZWxkLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULEtBQUssR0FJTixNQUFNLGVBQWUsQ0FBQTtBQUN0QixPQUFPLEVBR0wsUUFBUSxHQU9ULE1BQU0scUJBQXFCLENBQUE7O0FBTzVCLE1BQU0sT0FBTyxhQUFhO0lBaUJHLElBQUksQ0FBUTtJQUN2QyxtRkFBbUY7SUFDbkYsd0VBQXdFO0lBQ3hFLGdEQUFnRDtJQUN2QyxZQUFZLENBQXFCO0lBQ2pDLGVBQWUsQ0FBUztJQUN4QixXQUFXLENBQVU7SUFDckIsYUFBYSxDQUFVO0lBQ3ZCLGdCQUFnQixDQUFrQjtJQUNoQixhQUFhLENBR3ZDO0lBQ1EsVUFBVSxDQUVsQjtJQUNRLFdBQVcsQ0FBcUI7SUFFekMsR0FBRyxDQUF1RTtJQUVsRSxVQUFVO1FBQ2hCLE9BQU87WUFDTCxZQUFZLEVBQUUsSUFBSSxDQUFDLFlBQVk7WUFDL0IsZUFBZSxFQUFFLElBQUksQ0FBQyxlQUFlO1lBQ3JDLFdBQVcsRUFBRSxJQUFJLENBQUMsV0FBVztZQUM3QixhQUFhLEVBQUUsSUFBSSxDQUFDLGFBQWE7WUFDakMsZ0JBQWdCLEVBQUUsSUFBSSxDQUFDLGdCQUFnQjtZQUN2QyxVQUFVLEVBQUUsSUFBSSxDQUFDLFVBQVU7WUFDM0IsV0FBVyxFQUFFLElBQUksQ0FBQyxXQUFXO1lBQzdCLElBQUksRUFBRSxJQUFJLENBQUMsSUFBSTtZQUNmLElBQUksRUFBRSxJQUFJLENBQUMsYUFBYTtTQUN6QixDQUFBO0lBQ0gsQ0FBQztJQUVELE9BQU8sQ0FBYTtJQUVwQixRQUFRO1FBQ04sSUFBSSxDQUFDLEdBQUcsR0FBRyxJQUFJLFFBQVEsQ0FBQyxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUMsQ0FBQTtRQUUxQyxJQUFJLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsS0FBSyxFQUFFLENBQUE7SUFDakMsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsT0FBTyxFQUFFLEVBQUUsQ0FBQTtJQUNsQixDQUFDO0lBRUQsV0FBVztRQUNULE1BQU0sR0FBRyxHQUFHLElBQUksQ0FBQyxHQUFrQyxDQUFBO1FBQ25ELElBQUksQ0FBQyxHQUFHO1lBQUUsT0FBTTtRQUNoQixHQUFHLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQyxDQUFBO0lBQy9CLENBQUM7dUdBbkVVLGFBQWE7MkZBQWIsYUFBYTs7MkZBQWIsYUFBYTtrQkFMekIsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsaUJBQWlCO29CQUMzQixVQUFVLEVBQUUsSUFBSTtvQkFDaEIsUUFBUSxFQUFFLE9BQU87aUJBQ2xCOzhCQWtCNEIsSUFBSTtzQkFBOUIsS0FBSzt1QkFBQyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUU7Z0JBSWhCLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ0csZUFBZTtzQkFBdkIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNHLGFBQWE7c0JBQXJCLEtBQUs7Z0JBQ0csZ0JBQWdCO3NCQUF4QixLQUFLO2dCQUNxQixhQUFhO3NCQUF2QyxLQUFLO3VCQUFDLEVBQUUsUUFBUSxFQUFFLElBQUksRUFBRTtnQkFJaEIsVUFBVTtzQkFBbEIsS0FBSztnQkFHRyxXQUFXO3NCQUFuQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgRGlyZWN0aXZlLFxuICBJbnB1dCxcbiAgdHlwZSBPbkNoYW5nZXMsXG4gIHR5cGUgT25EZXN0cm95LFxuICB0eXBlIE9uSW5pdCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSdcbmltcG9ydCB7XG4gIHR5cGUgRGVlcEtleXMsXG4gIHR5cGUgRGVlcFZhbHVlLFxuICBGaWVsZEFwaSxcbiAgdHlwZSBGaWVsZE1ldGEsXG4gIHR5cGUgRmllbGRPcHRpb25zLFxuICB0eXBlIEZpZWxkVmFsaWRhdG9ycyxcbiAgRm9ybUFwaSxcbiAgdHlwZSBOb0luZmVyIGFzIE5vSW5mZXJIYWNrLFxuICB0eXBlIFZhbGlkYXRvcixcbn0gZnJvbSAnQHRhbnN0YWNrL2Zvcm0tY29yZSdcblxuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW3RhbnN0YWNrRmllbGRdJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgZXhwb3J0QXM6ICdmaWVsZCcsXG59KVxuZXhwb3J0IGNsYXNzIFRhblN0YWNrRmllbGQ8XG4gICAgVFBhcmVudERhdGEsXG4gICAgY29uc3QgVE5hbWUgZXh0ZW5kcyBEZWVwS2V5czxUUGFyZW50RGF0YT4sXG4gICAgVEZpZWxkVmFsaWRhdG9yIGV4dGVuZHNcbiAgICAgIHwgVmFsaWRhdG9yPERlZXBWYWx1ZTxUUGFyZW50RGF0YSwgVE5hbWU+LCB1bmtub3duPlxuICAgICAgfCB1bmRlZmluZWQgPSB1bmRlZmluZWQsXG4gICAgVEZvcm1WYWxpZGF0b3IgZXh0ZW5kc1xuICAgICAgfCBWYWxpZGF0b3I8VFBhcmVudERhdGEsIHVua25vd24+XG4gICAgICB8IHVuZGVmaW5lZCA9IHVuZGVmaW5lZCxcbiAgICBURGF0YSBleHRlbmRzIERlZXBWYWx1ZTxUUGFyZW50RGF0YSwgVE5hbWU+ID0gRGVlcFZhbHVlPFRQYXJlbnREYXRhLCBUTmFtZT4sXG4gID5cbiAgaW1wbGVtZW50c1xuICAgIE9uSW5pdCxcbiAgICBPbkNoYW5nZXMsXG4gICAgT25EZXN0cm95LFxuICAgIEZpZWxkT3B0aW9uczxUUGFyZW50RGF0YSwgVE5hbWUsIFRGaWVsZFZhbGlkYXRvciwgVEZvcm1WYWxpZGF0b3IsIFREYXRhPlxue1xuICBASW5wdXQoeyByZXF1aXJlZDogdHJ1ZSB9KSBuYW1lITogVE5hbWVcbiAgLy8gU2V0dGluZyBhcyBOb0luZmVySGFjayBhcyBpdCdzIHRoZSBzYW1lIGludGVybmFsIHR5cGUgY2FzdCBhcyBUYW5TdGFjayBGb3JtIENvcmVcbiAgLy8gVGhpcyBjYW4gYmUgcmVtb3ZlZCB3aGVuIFRhblN0YWNrIEZvcm0gQ29yZSBpcyBtb3ZlZCB0byBUUyBtaW4gb2YgNS40XG4gIC8vIGFuZCB0aGUgTm9JbmZlciBpbnRlcm5hbCB1dGlsIHR5cGUgaXMgcm0tcmYnZFxuICBASW5wdXQoKSBkZWZhdWx0VmFsdWU/OiBOb0luZmVySGFjazxURGF0YT5cbiAgQElucHV0KCkgYXN5bmNEZWJvdW5jZU1zPzogbnVtYmVyXG4gIEBJbnB1dCgpIGFzeW5jQWx3YXlzPzogYm9vbGVhblxuICBASW5wdXQoKSBwcmVzZXJ2ZVZhbHVlPzogYm9vbGVhblxuICBASW5wdXQoKSB2YWxpZGF0b3JBZGFwdGVyPzogVEZpZWxkVmFsaWRhdG9yXG4gIEBJbnB1dCh7IHJlcXVpcmVkOiB0cnVlIH0pIHRhbnN0YWNrRmllbGQhOiBGb3JtQXBpPFxuICAgIFRQYXJlbnREYXRhLFxuICAgIFRGb3JtVmFsaWRhdG9yXG4gID5cbiAgQElucHV0KCkgdmFsaWRhdG9ycz86IE5vSW5mZXI8XG4gICAgRmllbGRWYWxpZGF0b3JzPFRQYXJlbnREYXRhLCBUTmFtZSwgVEZpZWxkVmFsaWRhdG9yLCBURm9ybVZhbGlkYXRvciwgVERhdGE+XG4gID5cbiAgQElucHV0KCkgZGVmYXVsdE1ldGE/OiBQYXJ0aWFsPEZpZWxkTWV0YT5cblxuICBhcGkhOiBGaWVsZEFwaTxUUGFyZW50RGF0YSwgVE5hbWUsIFRGaWVsZFZhbGlkYXRvciwgVEZvcm1WYWxpZGF0b3IsIFREYXRhPlxuXG4gIHByaXZhdGUgZ2V0T3B0aW9ucygpIHtcbiAgICByZXR1cm4ge1xuICAgICAgZGVmYXVsdFZhbHVlOiB0aGlzLmRlZmF1bHRWYWx1ZSxcbiAgICAgIGFzeW5jRGVib3VuY2VNczogdGhpcy5hc3luY0RlYm91bmNlTXMsXG4gICAgICBhc3luY0Fsd2F5czogdGhpcy5hc3luY0Fsd2F5cyxcbiAgICAgIHByZXNlcnZlVmFsdWU6IHRoaXMucHJlc2VydmVWYWx1ZSxcbiAgICAgIHZhbGlkYXRvckFkYXB0ZXI6IHRoaXMudmFsaWRhdG9yQWRhcHRlcixcbiAgICAgIHZhbGlkYXRvcnM6IHRoaXMudmFsaWRhdG9ycyxcbiAgICAgIGRlZmF1bHRNZXRhOiB0aGlzLmRlZmF1bHRNZXRhLFxuICAgICAgbmFtZTogdGhpcy5uYW1lLFxuICAgICAgZm9ybTogdGhpcy50YW5zdGFja0ZpZWxkLFxuICAgIH1cbiAgfVxuXG4gIHVubW91bnQ/OiAoKSA9PiB2b2lkXG5cbiAgbmdPbkluaXQoKSB7XG4gICAgdGhpcy5hcGkgPSBuZXcgRmllbGRBcGkodGhpcy5nZXRPcHRpb25zKCkpXG5cbiAgICB0aGlzLnVubW91bnQgPSB0aGlzLmFwaS5tb3VudCgpXG4gIH1cblxuICBuZ09uRGVzdHJveSgpIHtcbiAgICB0aGlzLnVubW91bnQ/LigpXG4gIH1cblxuICBuZ09uQ2hhbmdlcygpIHtcbiAgICBjb25zdCBhcGkgPSB0aGlzLmFwaSBhcyB0eXBlb2YgdGhpcy5hcGkgfCB1bmRlZmluZWRcbiAgICBpZiAoIWFwaSkgcmV0dXJuXG4gICAgYXBpLnVwZGF0ZSh0aGlzLmdldE9wdGlvbnMoKSlcbiAgfVxufVxuIl19

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

@@ -0,0 +1,94 @@
+import { FormApi, FieldApi } from '@tanstack/form-core';
+import { injectStore as injectStore$1 } from '@tanstack/angular-store';
+import * as i0 from '@angular/core';
+import { Directive, Input } from '@angular/core';
+
+function injectForm(opts) {
+    const api = new FormApi(opts);
+    injectStore$1(api.store, (state) => state.isSubmitting);
+    return api;
+}
+
+class TanStackField {
+    name;
+    // Setting as NoInferHack as it's the same internal type cast as TanStack Form Core
+    // This can be removed when TanStack Form Core is moved to TS min of 5.4
+    // and the NoInfer internal util type is rm-rf'd
+    defaultValue;
+    asyncDebounceMs;
+    asyncAlways;
+    preserveValue;
+    validatorAdapter;
+    tanstackField;
+    validators;
+    defaultMeta;
+    api;
+    getOptions() {
+        return {
+            defaultValue: this.defaultValue,
+            asyncDebounceMs: this.asyncDebounceMs,
+            asyncAlways: this.asyncAlways,
+            preserveValue: this.preserveValue,
+            validatorAdapter: this.validatorAdapter,
+            validators: this.validators,
+            defaultMeta: this.defaultMeta,
+            name: this.name,
+            form: this.tanstackField,
+        };
+    }
+    unmount;
+    ngOnInit() {
+        this.api = new FieldApi(this.getOptions());
+        this.unmount = this.api.mount();
+    }
+    ngOnDestroy() {
+        this.unmount?.();
+    }
+    ngOnChanges() {
+        const api = this.api;
+        if (!api)
+            return;
+        api.update(this.getOptions());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TanStackField, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: TanStackField, isStandalone: true, selector: "[tanstackField]", inputs: { name: "name", defaultValue: "defaultValue", asyncDebounceMs: "asyncDebounceMs", asyncAlways: "asyncAlways", preserveValue: "preserveValue", validatorAdapter: "validatorAdapter", tanstackField: "tanstackField", validators: "validators", defaultMeta: "defaultMeta" }, exportAs: ["field"], usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", 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
+            }], asyncAlways: [{
+                type: Input
+            }], preserveValue: [{
+                type: Input
+            }], validatorAdapter: [{
+                type: Input
+            }], tanstackField: [{
+                type: Input,
+                args: [{ required: true }]
+            }], validators: [{
+                type: Input
+            }], defaultMeta: [{
+                type: Input
+            }] } });
+
+function injectStore(form, selector) {
+    return injectStore$1(form.store, selector);
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TanStackField, injectForm, injectStore };
+//# sourceMappingURL=tanstack-angular-form.mjs.map

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

@@ -0,0 +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, type FormOptions, type Validator } from '@tanstack/form-core'\nimport { injectStore } from '@tanstack/angular-store'\n\nexport function injectForm<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(opts?: FormOptions<TFormData, TFormValidator>) {\n  const api = new FormApi<TFormData, TFormValidator>(opts)\n\n  injectStore(api.store, (state) => state.isSubmitting)\n\n  return api\n}\n","import {\n  Directive,\n  Input,\n  type OnChanges,\n  type OnDestroy,\n  type OnInit,\n} from '@angular/core'\nimport {\n  type DeepKeys,\n  type DeepValue,\n  FieldApi,\n  type FieldMeta,\n  type FieldOptions,\n  type FieldValidators,\n  FormApi,\n  type NoInfer as NoInferHack,\n  type Validator,\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    TFieldValidator extends\n      | Validator<DeepValue<TParentData, TName>, unknown>\n      | undefined = undefined,\n    TFormValidator extends\n      | Validator<TParentData, unknown>\n      | undefined = undefined,\n    TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n  >\n  implements\n    OnInit,\n    OnChanges,\n    OnDestroy,\n    FieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>\n{\n  @Input({ required: true }) name!: TName\n  // Setting as NoInferHack as it's the same internal type cast as TanStack Form Core\n  // This can be removed when TanStack Form Core is moved to TS min of 5.4\n  // and the NoInfer internal util type is rm-rf'd\n  @Input() defaultValue?: NoInferHack<TData>\n  @Input() asyncDebounceMs?: number\n  @Input() asyncAlways?: boolean\n  @Input() preserveValue?: boolean\n  @Input() validatorAdapter?: TFieldValidator\n  @Input({ required: true }) tanstackField!: FormApi<\n    TParentData,\n    TFormValidator\n  >\n  @Input() validators?: NoInfer<\n    FieldValidators<TParentData, TName, TFieldValidator, TFormValidator, TData>\n  >\n  @Input() defaultMeta?: Partial<FieldMeta>\n\n  api!: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>\n\n  private getOptions() {\n    return {\n      defaultValue: this.defaultValue,\n      asyncDebounceMs: this.asyncDebounceMs,\n      asyncAlways: this.asyncAlways,\n      preserveValue: this.preserveValue,\n      validatorAdapter: this.validatorAdapter,\n      validators: this.validators,\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 { FormApi, FormState, Validator } from '@tanstack/form-core'\n\nexport function injectStore<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n  TSelected = NoInfer<FormState<TFormData>>,\n>(\n  form: FormApi<TFormData, TFormValidator>,\n  selector?: (state: NoInfer<FormState<TFormData>>) => 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/build/index.d.ts

@@ -0,0 +1,4 @@
+export type { FieldApi, FormOptions, FieldState, FieldValidateFn, FieldValidateAsyncFn, } from '@tanstack/form-core';
+export { injectForm } from './inject-form';
+export { TanStackField } from './tanstack-field.directive';
+export { injectStore } from './inject-store';

package/build/inject-form.d.ts

@@ -0,0 +1,2 @@
+import { FormApi, type FormOptions, type Validator } from '@tanstack/form-core';
+export declare function injectForm<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined>(opts?: FormOptions<TFormData, TFormValidator>): FormApi<TFormData, TFormValidator>;

package/build/inject-store.d.ts

@@ -0,0 +1,2 @@
+import type { FormApi, FormState, Validator } from '@tanstack/form-core';
+export declare function injectStore<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined, TSelected = NoInfer<FormState<TFormData>>>(form: FormApi<TFormData, TFormValidator>, selector?: (state: NoInfer<FormState<TFormData>>) => TSelected): import("@angular/core").Signal<TSelected>;

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

@@ -0,0 +1,22 @@
+import { type OnChanges, type OnDestroy, type OnInit } from '@angular/core';
+import { type DeepKeys, type DeepValue, FieldApi, type FieldMeta, type FieldOptions, type FieldValidators, FormApi, type NoInfer as NoInferHack, type Validator } from '@tanstack/form-core';
+import * as i0 from "@angular/core";
+export declare class TanStackField<TParentData, const TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> implements OnInit, OnChanges, OnDestroy, FieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData> {
+    name: TName;
+    defaultValue?: NoInferHack<TData>;
+    asyncDebounceMs?: number;
+    asyncAlways?: boolean;
+    preserveValue?: boolean;
+    validatorAdapter?: TFieldValidator;
+    tanstackField: FormApi<TParentData, TFormValidator>;
+    validators?: NoInfer<FieldValidators<TParentData, TName, TFieldValidator, TFormValidator, TData>>;
+    defaultMeta?: Partial<FieldMeta>;
+    api: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>;
+    private getOptions;
+    unmount?: () => void;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    ngOnChanges(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TanStackField<any, any, any, any, any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TanStackField<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; }; "preserveValue": { "alias": "preserveValue"; "required": false; }; "validatorAdapter": { "alias": "validatorAdapter"; "required": false; }; "tanstackField": { "alias": "tanstackField"; "required": true; }; "validators": { "alias": "validators"; "required": false; }; "defaultMeta": { "alias": "defaultMeta"; "required": false; }; }, {}, never, never, true, never>;
+}

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@tanstack/angular-form",
+  "version": "0.17.0",
+  "description": "Powerful, type-safe forms for Angular.",
+  "author": "tannerlinsley",
+  "license": "MIT",
+  "repository": "tanstack/form",
+  "homepage": "https://tanstack.com/form",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "sideEffects": false,
+  "files": [
+    "build",
+    "src"
+  ],
+  "type": "module",
+  "nx": {
+    "targets": {
+      "test:build": {
+        "dependsOn": [
+          "build"
+        ]
+      }
+    }
+  },
+  "devDependencies": {
+    "@analogjs/vite-plugin-angular": "^1.0.0",
+    "@angular/common": "^17.3.0",
+    "@angular/compiler": "^17.3.0",
+    "@angular/compiler-cli": "^17.3.0",
+    "@angular/core": "^17.3.0",
+    "@angular/platform-browser": "^17.3.0",
+    "@angular/platform-browser-dynamic": "^17.3.0",
+    "@testing-library/angular": "^15.2.0",
+    "ng-packagr": "^17.3.0",
+    "typescript": "5.4.2",
+    "zone.js": "~0.14.2"
+  },
+  "dependencies": {
+    "@tanstack/angular-store": "^0.4.0",
+    "tslib": "^2.3.0",
+    "@tanstack/form-core": "0.16.2"
+  },
+  "peerDependencies": {
+    "@angular/core": ">=17.3.0"
+  },
+  "module": "build/fesm2022/tanstack-angular-form.mjs",
+  "types": "build/index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./build/index.d.ts",
+      "esm2022": "./build/esm2022/tanstack-angular-form.mjs",
+      "esm": "./build/esm2022/tanstack-angular-form.mjs",
+      "default": "./build/fesm2022/tanstack-angular-form.mjs"
+    }
+  },
+  "scripts": {
+    "build": "ng-packagr -p ng-package.json -c tsconfig.build.json && rimraf ./build/package.json",
+    "clean": "rimraf ./build && rimraf ./coverage",
+    "test:eslint": "eslint --ext .ts,.tsx ./src",
+    "test:types": "tsc --noEmit",
+    "test:lib": "vitest",
+    "test:lib:dev": "pnpm run test:lib --watch",
+    "test:build": "publint --strict"
+  }
+}

package/src/index.ts

@@ -0,0 +1,10 @@
+export type {
+  FieldApi,
+  FormOptions,
+  FieldState,
+  FieldValidateFn,
+  FieldValidateAsyncFn,
+} from '@tanstack/form-core'
+export { injectForm } from './inject-form'
+export { TanStackField } from './tanstack-field.directive'
+export { injectStore } from './inject-store'

package/src/inject-form.ts

@@ -0,0 +1,13 @@
+import { FormApi, type FormOptions, type Validator } from '@tanstack/form-core'
+import { injectStore } from '@tanstack/angular-store'
+
+export function injectForm<
+  TFormData,
+  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
+>(opts?: FormOptions<TFormData, TFormValidator>) {
+  const api = new FormApi<TFormData, TFormValidator>(opts)
+
+  injectStore(api.store, (state) => state.isSubmitting)
+
+  return api
+}

package/src/inject-store.ts

@@ -0,0 +1,13 @@
+import { injectStore as injectAngularStore } from '@tanstack/angular-store'
+import type { FormApi, FormState, Validator } from '@tanstack/form-core'
+
+export function injectStore<
+  TFormData,
+  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
+  TSelected = NoInfer<FormState<TFormData>>,
+>(
+  form: FormApi<TFormData, TFormValidator>,
+  selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,
+) {
+  return injectAngularStore(form.store, selector)
+}

package/src/tanstack-field.directive.ts

@@ -0,0 +1,93 @@
+import {
+  Directive,
+  Input,
+  type OnChanges,
+  type OnDestroy,
+  type OnInit,
+} from '@angular/core'
+import {
+  type DeepKeys,
+  type DeepValue,
+  FieldApi,
+  type FieldMeta,
+  type FieldOptions,
+  type FieldValidators,
+  FormApi,
+  type NoInfer as NoInferHack,
+  type Validator,
+} from '@tanstack/form-core'
+
+@Directive({
+  selector: '[tanstackField]',
+  standalone: true,
+  exportAs: 'field',
+})
+export class TanStackField<
+    TParentData,
+    const TName extends DeepKeys<TParentData>,
+    TFieldValidator extends
+      | Validator<DeepValue<TParentData, TName>, unknown>
+      | undefined = undefined,
+    TFormValidator extends
+      | Validator<TParentData, unknown>
+      | undefined = undefined,
+    TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
+  >
+  implements
+    OnInit,
+    OnChanges,
+    OnDestroy,
+    FieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>
+{
+  @Input({ required: true }) name!: TName
+  // Setting as NoInferHack as it's the same internal type cast as TanStack Form Core
+  // This can be removed when TanStack Form Core is moved to TS min of 5.4
+  // and the NoInfer internal util type is rm-rf'd
+  @Input() defaultValue?: NoInferHack<TData>
+  @Input() asyncDebounceMs?: number
+  @Input() asyncAlways?: boolean
+  @Input() preserveValue?: boolean
+  @Input() validatorAdapter?: TFieldValidator
+  @Input({ required: true }) tanstackField!: FormApi<
+    TParentData,
+    TFormValidator
+  >
+  @Input() validators?: NoInfer<
+    FieldValidators<TParentData, TName, TFieldValidator, TFormValidator, TData>
+  >
+  @Input() defaultMeta?: Partial<FieldMeta>
+
+  api!: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>
+
+  private getOptions() {
+    return {
+      defaultValue: this.defaultValue,
+      asyncDebounceMs: this.asyncDebounceMs,
+      asyncAlways: this.asyncAlways,
+      preserveValue: this.preserveValue,
+      validatorAdapter: this.validatorAdapter,
+      validators: this.validators,
+      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())
+  }
+}

package/src/test-setup.ts

@@ -0,0 +1,13 @@
+import '@analogjs/vite-plugin-angular/setup-vitest'
+import '@testing-library/jest-dom/vitest'
+
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting,
+} from '@angular/platform-browser-dynamic/testing'
+import { getTestBed } from '@angular/core/testing'
+
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(),
+)

package/src/tests/test.component.spec.ts

@@ -0,0 +1,358 @@
+import { render } from '@testing-library/angular'
+import { Component } from '@angular/core'
+import { describe, expect, it } from 'vitest'
+import { userEvent } from '@testing-library/user-event'
+import { injectForm } from '../inject-form'
+import { TanStackField } from '../tanstack-field.directive'
+import { sleep } from './utils'
+import type { FieldValidateAsyncFn, FieldValidateFn } from '@tanstack/form-core'
+
+const user = userEvent.setup()
+
+describe('TanStackFieldDirective', () => {
+  it('should allow to set default value', async () => {
+    @Component({
+      selector: 'test-component',
+      standalone: true,
+      template: `
+        <ng-container [tanstackField]="form" name="firstName" #f="field">
+          <input
+            data-testid="fieldinput"
+            [value]="f.api.state.value"
+            (blur)="f.api.handleBlur()"
+            (input)="f.api.handleChange($any($event).target.value)"
+          />
+        </ng-container>
+      `,
+      imports: [TanStackField],
+    })
+    class TestComponent {
+      form = injectForm({
+        defaultValues: {
+          firstName: 'FirstName',
+          lastName: 'LastName',
+        },
+      })
+    }
+
+    const { getByTestId } = await render(TestComponent)
+
+    const input = getByTestId('fieldinput')
+    expect(input).toHaveValue('FirstName')
+  })
+
+  it('should use field default value first', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+
+    @Component({
+      selector: 'test-component',
+      standalone: true,
+      template: `
+        <ng-container
+          [tanstackField]="form"
+          name="firstName"
+          defaultValue="otherName"
+          #f="field"
+        >
+          <input
+            data-testid="fieldinput"
+            [value]="f.api.state.value"
+            (blur)="f.api.handleBlur()"
+            (input)="f.api.handleChange($any($event).target.value)"
+          />
+        </ng-container>
+      `,
+      imports: [TanStackField],
+    })
+    class TestComponent {
+      form = injectForm<Person>({
+        defaultValues: {
+          firstName: 'FirstName',
+          lastName: 'LastName',
+        },
+      })
+    }
+
+    const { getByTestId } = await render(TestComponent)
+
+    const input = getByTestId('fieldinput')
+    expect(input).toHaveValue('otherName')
+  })
+
+  it('should not validate on change if isTouched is false', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+    const error = 'Please enter a different value'
+
+    @Component({
+      selector: 'test-component',
+      standalone: true,
+      template: `
+        <ng-container
+          [tanstackField]="form"
+          name="firstName"
+          [validators]="{ onChange: otherValidator }"
+          #f="field"
+        >
+          <input
+            data-testid="fieldinput"
+            [value]="f.api.state.value"
+            (blur)="f.api.handleBlur()"
+            (input)="f.api.setValue($any($event).target.value)"
+          />
+          @for (error of f.api.getMeta().errors; track error) {
+            <p>{{ error }}</p>
+          }
+        </ng-container>
+      `,
+      imports: [TanStackField],
+    })
+    class TestComponent {
+      otherValidator: FieldValidateFn<Person, 'firstName'> = ({ value }) =>
+        value === 'other' ? error : undefined
+
+      form = injectForm<Person>({
+        defaultValues: {
+          firstName: 'FirstName',
+          lastName: 'LastName',
+        },
+      })
+    }
+
+    const { getByTestId, queryByText } = await render(TestComponent)
+    const input = getByTestId('fieldinput')
+    await user.type(input, 'other')
+    expect(queryByText(error)).not.toBeInTheDocument()
+  })
+
+  it('should validate on change if isTouched is true', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+    const error = 'Please enter a different value'
+
+    @Component({
+      selector: 'test-component',
+      standalone: true,
+      template: `
+        <ng-container
+          [tanstackField]="form"
+          name="firstName"
+          [defaultMeta]="{ isTouched: true }"
+          [validators]="{ onChange: otherValidator }"
+          #f="field"
+        >
+          <input
+            data-testid="fieldinput"
+            [value]="f.api.state.value"
+            (blur)="f.api.handleBlur()"
+            (input)="f.api.handleChange($any($event).target.value)"
+          />
+          <p>{{ f.api.getMeta().errorMap?.onChange }}</p>
+        </ng-container>
+      `,
+      imports: [TanStackField],
+    })
+    class TestComponent {
+      otherValidator: FieldValidateFn<Person, 'firstName'> = ({ value }) =>
+        value === 'other' ? error : undefined
+
+      form = injectForm<Person>({
+        defaultValues: {
+          firstName: '',
+          lastName: '',
+        },
+      })
+    }
+
+    const { getByTestId, queryByText, getByText } = await render(TestComponent)
+
+    const input = getByTestId('fieldinput')
+    expect(queryByText(error)).not.toBeInTheDocument()
+    await user.type(input, 'other')
+    expect(getByText(error)).toBeInTheDocument()
+  })
+
+  it('should validate on change and on blur', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+    const onChangeError = 'Please enter a different value (onChangeError)'
+    const onBlurError = 'Please enter a different value (onBlurError)'
+
+    @Component({
+      selector: 'test-component',
+      standalone: true,
+      template: `
+        <ng-container
+          [tanstackField]="form"
+          name="firstName"
+          [defaultMeta]="{ isTouched: true }"
+          [validators]="{ onChange: onChange, onBlur: onBlur }"
+          #f="field"
+        >
+          <input
+            data-testid="fieldinput"
+            [value]="f.api.state.value"
+            [name]="f.api.name"
+            (blur)="f.api.handleBlur()"
+            (input)="f.api.setValue($any($event).target.value)"
+          />
+          <p>{{ f.api.getMeta().errorMap?.onChange }}</p>
+          <p>{{ f.api.getMeta().errorMap?.onBlur }}</p>
+        </ng-container>
+      `,
+      imports: [TanStackField],
+    })
+    class TestComponent {
+      onChange: FieldValidateFn<Person, 'firstName'> = ({ value }) =>
+        value === 'other' ? onChangeError : undefined
+      onBlur: FieldValidateFn<Person, 'firstName'> = ({ value }) =>
+        value === 'other' ? onBlurError : undefined
+
+      form = injectForm<Person>({
+        defaultValues: {
+          firstName: '',
+          lastName: '',
+        },
+      })
+    }
+
+    const { getByTestId, getByText, queryByText } = await render(TestComponent)
+    const input = getByTestId('fieldinput')
+    expect(queryByText(onChangeError)).not.toBeInTheDocument()
+    expect(queryByText(onBlurError)).not.toBeInTheDocument()
+    await user.type(input, 'other')
+    expect(getByText(onChangeError)).toBeInTheDocument()
+    await user.click(document.body)
+    expect(queryByText(onBlurError)).toBeInTheDocument()
+  })
+
+  it('should validate async on change', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+    const error = 'Please enter a different value'
+
+    @Component({
+      selector: 'test-component',
+      standalone: true,
+      template: `
+        <ng-container
+          [tanstackField]="form"
+          name="firstName"
+          [defaultMeta]="{ isTouched: true }"
+          [validators]="{ onChangeAsync: onChangeAsync }"
+          #f="field"
+        >
+          <input
+            data-testid="fieldinput"
+            [name]="f.api.name"
+            [value]="f.api.state.value"
+            (blur)="f.api.handleBlur()"
+            (input)="f.api.handleChange($any($event).target.value)"
+          />
+          <p>{{ f.api.getMeta().errorMap?.onChange }}</p>
+        </ng-container>
+      `,
+      imports: [TanStackField],
+    })
+    class TestComponent {
+      onChangeAsync: FieldValidateAsyncFn<Person, 'firstName'> = async () => {
+        await sleep(10)
+        return error
+      }
+
+      form = injectForm<Person>({
+        defaultValues: {
+          firstName: '',
+          lastName: '',
+        },
+      })
+    }
+
+    const { getByTestId, getByText, findByText, queryByText } =
+      await render(TestComponent)
+    const input = getByTestId('fieldinput')
+    expect(queryByText(error)).not.toBeInTheDocument()
+    await user.type(input, 'other')
+    await findByText(error)
+    expect(getByText(error)).toBeInTheDocument()
+  })
+
+  it('should validate async on change and async on blur', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+    const onChangeError = 'Please enter a different value (onChangeError)'
+    const onBlurError = 'Please enter a different value (onBlurError)'
+
+    @Component({
+      selector: 'test-component',
+      standalone: true,
+      template: `
+        <ng-container
+          [tanstackField]="form"
+          name="firstName"
+          [defaultMeta]="{ isTouched: true }"
+          [validators]="{
+            onChangeAsync: onChangeAsync,
+            onBlurAsync: onBlurAsync
+          }"
+          #f="field"
+        >
+          <input
+            data-testid="fieldinput"
+            [name]="f.api.name"
+            [value]="f.api.state.value"
+            (blur)="f.api.handleBlur()"
+            (input)="f.api.handleChange($any($event).target.value)"
+          />
+          <p>{{ f.api.getMeta().errorMap?.onChange }}</p>
+          <p>{{ f.api.getMeta().errorMap?.onBlur }}</p>
+        </ng-container>
+      `,
+      imports: [TanStackField],
+    })
+    class TestComponent {
+      onChangeAsync: FieldValidateAsyncFn<Person, 'firstName'> = async () => {
+        await sleep(10)
+        return onChangeError
+      }
+
+      onBlurAsync: FieldValidateAsyncFn<Person, 'firstName'> = async () => {
+        await sleep(10)
+        return onBlurError
+      }
+
+      form = injectForm<Person>({
+        defaultValues: {
+          firstName: '',
+          lastName: '',
+        },
+      })
+    }
+
+    const { getByTestId, getByText, findByText, queryByText } =
+      await render(TestComponent)
+    const input = getByTestId('fieldinput')
+
+    expect(queryByText(onChangeError)).not.toBeInTheDocument()
+    expect(queryByText(onBlurError)).not.toBeInTheDocument()
+    await user.type(input, 'other')
+    await findByText(onChangeError)
+    expect(getByText(onChangeError)).toBeInTheDocument()
+    await user.click(document.body)
+    await findByText(onBlurError)
+    expect(getByText(onBlurError)).toBeInTheDocument()
+  })
+})

package/src/tests/utils.ts

@@ -0,0 +1,5 @@
+export function sleep(timeout: number): Promise<void> {
+  return new Promise((resolve, _reject) => {
+    setTimeout(resolve, timeout)
+  })
+}