docs: rewrite tanstack form example

Author: KevinVandy

examples/angular/with-tanstack-form/package.json

@@ -18,8 +18,10 @@
     "@angular/platform-browser": "^22.0.2",
     "@angular/router": "^22.0.2",
     "@faker-js/faker": "^10.5.0",
+    "@tanstack/angular-devtools": "^0.0.4",
     "@tanstack/angular-form": "^1.33.0",
     "@tanstack/angular-table": "^9.0.0-beta.21",
+    "@tanstack/angular-table-devtools": "^9.0.0-beta.21",
     "rxjs": "~7.8.2",
     "tslib": "^2.8.1",
     "zod": "^4.4.3"

examples/angular/with-tanstack-form/src/app/app.config.ts

@@ -1,8 +1,25 @@
-import { provideBrowserGlobalErrorListeners } from '@angular/core'
+import { isDevMode, provideBrowserGlobalErrorListeners } from '@angular/core'
+import { provideTanStackDevtools } from '@tanstack/angular-devtools/provider'
 import { provideRouter } from '@angular/router'
 import { routes } from './app.routes'
 import type { ApplicationConfig } from '@angular/core'
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideBrowserGlobalErrorListeners(), provideRouter(routes)],
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideRouter(routes),
+    isDevMode()
+      ? provideTanStackDevtools(() => ({
+          plugins: [
+            {
+              name: 'TanStack Table',
+              render: () =>
+                import('@tanstack/angular-table-devtools').then((m) =>
+                  m.TableDevtoolsPanel(),
+                ),
+            },
+          ],
+        }))
+      : [],
+  ],
 }