fix(angular-form): prevent full array re-renders in array mode

.changeset/fresh-trams-joke.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/angular-form': patch
+---
+
+prevent full array re-renders in array mode

docs/framework/angular/guides/arrays.md

@@ -15,7 +15,7 @@ To use an array, you can use `field.api.state.value` on an array value:
   standalone: true,
   imports: [TanStackField],
   template: `
-    <ng-container [tanstackField]="form" name="people" #people="field">
+    <ng-container [tanstackField]="form" name="people" mode="array" #people="field">
       <div>
         @for (_ of people.api.state.value; track $index) {
           <!-- ... -->
@@ -101,7 +101,7 @@ export class AppComponent {
   template: `
     <form (submit)="handleSubmit($event)">
       <div>
-        <ng-container [tanstackField]="form" name="people" #people="field">
+        <ng-container [tanstackField]="form" name="people" mode="array" #people="field">
           <div>
             @for (_ of people.api.state.value; track $index) {
               <ng-container

examples/angular/array/src/app/app.component.ts

@@ -8,7 +8,12 @@ import { TanStackField, injectForm, injectStore } from '@tanstack/angular-form'
   template: `
     <form (submit)="handleSubmit($event)">
       <div>
-        <ng-container [tanstackField]="form" name="people" #people="field">
+        <ng-container
+          [tanstackField]="form"
+          name="people"
+          mode="array"
+          #people="field"
+        >
           <div>
             @for (_ of people.api.state.value; track $index) {
               <ng-container

packages/angular-form/src/tanstack-field.ts

@@ -237,25 +237,63 @@ export class TanStackField<
   cd = inject(ChangeDetectorRef)
 
   ngOnInit() {
-    const vals = injectStore(
+    // Subscribe to the pieces of field state that should trigger a re-render.
+    // For array mode, we only track the length of the array value to avoid
+    // re-renders when child properties change. Meta is tracked piece by piece
+    // so that consumers re-render when any meta property updates.
+    // See: https://github.com/TanStack/form/issues/1961
+    const injectorOpts = { injector: this.injector }
+    const isArrayMode = this.mode() === 'array'
+    const reactiveValue = injectStore(
       this._api().store,
-      this.mode() === 'array'
-        ? (state) => {
-            return [
-              state.meta,
-              Object.keys((state.value as unknown) ?? []).length,
-            ]
-          }
-        : undefined,
-      {
-        injector: this.injector,
-      },
+      (state) =>
+        isArrayMode
+          ? Object.keys((state.value as unknown) ?? []).length
+          : state.value,
+      injectorOpts,
+    )
+    const reactiveIsTouched = injectStore(
+      this._api().store,
+      (state) => state.meta.isTouched,
+      injectorOpts,
+    )
+    const reactiveIsBlurred = injectStore(
+      this._api().store,
+      (state) => state.meta.isBlurred,
+      injectorOpts,
+    )
+    const reactiveIsDirty = injectStore(
+      this._api().store,
+      (state) => state.meta.isDirty,
+      injectorOpts,
+    )
+    const reactiveErrorMap = injectStore(
+      this._api().store,
+      (state) => state.meta.errorMap,
+      injectorOpts,
+    )
+    const reactiveErrorSourceMap = injectStore(
+      this._api().store,
+      (state) => state.meta.errorSourceMap,
+      injectorOpts,
+    )
+    const reactiveIsValidating = injectStore(
+      this._api().store,
+      (state) => state.meta.isValidating,
+      injectorOpts,
     )
 
     effect(
       () => {
-        // Load bearing change detection check
-        const _values = vals()
+        // Load bearing change detection check — read every reactive source so
+        // the effect runs whenever any of them change.
+        reactiveValue()
+        reactiveIsTouched()
+        reactiveIsBlurred()
+        reactiveIsDirty()
+        reactiveErrorMap()
+        reactiveErrorSourceMap()
+        reactiveIsValidating()
         this.cd.markForCheck()
       },
       { injector: this.injector },