feat: Add new AppField API for Angular

[crutchcorn]

This PR adds in a new AppField API for our Angular adapter, which massively improves the DX of the library.

Huge thank you to @flensrocker for the inspiration and pair-coding on this problem!

TODOs

• Write tests
• Write docs
• Triple check no breaking changes were made

[nx-cloud]

View your CI Pipeline Execution ↗ for commit f23e383.

Command	Status	Duration	Result
nx affected --targets=test:sherif,test:knip,tes...	❌ Failed	2m 21s	View ↗
nx run-many --target=build --exclude=examples/**	✅ Succeeded	22s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-05-31 14:54:25 UTC

[flensrocker]

The dependency injection doesn't guarantee type safety, so now we are able to assign a number field to the app-text-field.

To be fair currently we don't have typesafety in the "simple" example, too, when assigning the name input of the tanstackField directive (and we don't have a runtime error, just an additional misspelled field in the form data). I don't know if that's a problem with the Angular Template compiler or if we can improve the DX even more.

I wonder if it's possible to create something like the TanStackFieldComponent from this PR but with a restricted type for TData and use that as a AppTextField.

More research is needed...

[crutchcorn]

The dependency injection doesn't guarantee type safety, so now we are able to assign a number field to the app-text-field.

This is known, but trivially resolved by adding a:

value = input.required<string>();

As a property no the app-text-component, just as suggested in React.

To be fair currently we don't have typesafety in the "simple" example, too, when assigning the name input of the tanstackField directive (and we don't have a runtime error, just an additional misspelled field in the form data). I don't know if that's a problem with the Angular Template compiler or if we can improve the DX even more.

That... Isn't accurate from my testing when I first wrote the adapter of Angular... I wonder if there's been a regression in Angular on this area. Reproduction and deeper investigation would be welcome

[pkg-pr-new]

More templates

• @tanstack/form-example-angular-array
• @tanstack/form-example-angular-large-form
• @tanstack/form-example-angular-simple
• @tanstack/form-example-lit-simple
• @tanstack/form-example-lit-ui-libraries
• @tanstack/form-example-react-array
• @tanstack/form-example-react-compiler
• @tanstack/field-errors-from-form-validators
• @tanstack/form-example-react-large-form
• @tanstack/form-example-react-next-server-actions
• @tanstack/form-example-react-query-integration
• @tanstack/form-example-remix
• @tanstack/form-example-react-simple
• @tanstack/form-example-react-standard-schema
• @tanstack/form-example-react-tanstack-start
• @tanstack/form-example-react-ui-libraries
• @tanstack/form-example-solid-array
• @tanstack/form-example-solid-simple
• @tanstack/form-example-svelte-array
• @tanstack/form-example-svelte-simple
• @tanstack/form-example-vue-array
• @tanstack/form-example-vue-simple

@tanstack/angular-form

npm i https://pkg.pr.new/@tanstack/angular-form@1541

@tanstack/form-core

npm i https://pkg.pr.new/@tanstack/form-core@1541

@tanstack/lit-form

npm i https://pkg.pr.new/@tanstack/lit-form@1541

@tanstack/react-form

npm i https://pkg.pr.new/@tanstack/react-form@1541

@tanstack/solid-form

npm i https://pkg.pr.new/@tanstack/solid-form@1541

@tanstack/svelte-form

npm i https://pkg.pr.new/@tanstack/svelte-form@1541

@tanstack/vue-form

npm i https://pkg.pr.new/@tanstack/vue-form@1541

commit: f23e383

[flensrocker]

I made a few steps back to get a better understanding of what's going on.

In today's timeslot I removed the extra layers and derived the AppTextField directly from TanStackField and narrowed TName down to const TName extends DeepKeysOfType<TParentData, string>, so we only allow names of string fields.

For now with a complete set of all the types (because I don't know which one can be any).
But at least I get an error, if I try to pass the name of a number field to AppTextField.

I guess in other frameworks the "glue" to make this friendlier is the fieldContext, withForm etc.

https://github.com/flensrocker/tan-stack-form/blob/cefcb102016e067e83a5de59287c7a2df332a0c3/examples/angular/large-form/src/app/app.component.ts#L30

[flensrocker]

You may want to cherry-pick
flensrocker@ae5751d

The refactoring to input signals of the TanStackField broke the "simple" example, because the api would be created after the template tries to read its name properties etc.

Does the (unnecessary) update of the options on the first run of the effect hurt? Or is the "no change actually happened" intercepted somewhere in the underlying store? Otherwise a "needs update because of some change" check could be implemented inside the effect comparing the next values of the options to the current ones of api.

[flensrocker]

To be fair currently we don't have typesafety in the "simple" example, too, when assigning the name input of the tanstackField directive (and we don't have a runtime error, just an additional misspelled field in the form data). I don't know if that's a problem with the Angular Template compiler or if we can improve the DX even more.

That... Isn't accurate from my testing when I first wrote the adapter of Angular... I wonder if there's been a regression in Angular on this area. Reproduction and deeper investigation would be welcome

I just tried with the main branch. When I run the "simple" Angular example I can specify whatever I want on the name input of tanstackField.
That's weird.