fix(angular-form): prevent full array re-renders in array mode by crutchcorn · Pull Request #2171 · TanStack/form

crutchcorn · 2026-05-10T21:06:23Z

Mirrors #1963 but for the Angular adapter

Summary by CodeRabbit

Bug Fixes
- Prevented unnecessary full re-renders for fields configured in array mode, improving stability and performance.
Documentation
- Updated Angular docs and examples to explicitly show array-mode configuration for array fields.

coderabbitai · 2026-05-10T21:06:34Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 51254d78-a4e1-4128-8a10-4fa01c60d429

📥 Commits

Reviewing files that changed from the base of the PR and between 16e1818 and 1ff14df.

📒 Files selected for processing (1)

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

🚧 Files skipped from review as they are similar to previous changes (1)

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

📝 Walkthrough

Walkthrough

Optimizes TanStack Angular Form change detection to avoid full array re-renders in array mode by tracking array length and splitting reactive selectors; updates docs/examples to use mode="array" and adds a changeset entry.

Changes

Array Mode Re-render Optimization

Layer / File(s)	Summary
Change Detection Refactor `packages/angular-form/src/tanstack-field.ts`	`ngOnInit` refactored to replace single `vals()` subscription with separate `injectStore` selectors. In array mode, tracks only array length; otherwise tracks full value. Meta flags (`isTouched`, `isBlurred`, `isDirty`, `isValidating`) and error maps tracked via dedicated calls. Effect reads each selector directly to trigger re-renders only when relevant state changes and calls `cd.markForCheck()`.
Documentation & Examples `docs/framework/angular/guides/arrays.md`, `examples/angular/array/src/app/app.component.ts`	Added explicit `mode="array"` binding to `ng-container` in both Basic Usage and Full Example documentation sections. Example component template reformatted to multi-line attribute layout while preserving bindings.
Release Notes `.changeset/fresh-trams-joke.md`	Patch changeset entry for `@tanstack/angular-form` documenting "prevent full array re-renders in array mode".

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

I nibble through arrays, counting each hop,
Track only length so full re-renders stop.
A nibble here, a markForCheck there,
Light and swift, the form breathes air. 🐇✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description is minimal and does not follow the required template structure with sections for Changes and Checklist; critical information like testing confirmation and changeset status are missing.	Expand the description to include detailed changes, confirm testing with 'pnpm test:pr', and explicitly indicate changeset status in the template format.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the main fix: preventing full array re-renders in array mode for the Angular form adapter, which aligns with the actual changes made.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch fix-angular-array-mode

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

nx-cloud · 2026-05-10T21:06:50Z

View your CI Pipeline Execution ↗ for commit 425840e

Command	Status	Duration	Result
`nx affected --targets=test:sherif,test:knip,tes...`	✅ Succeeded	33s	View ↗
`nx run-many --target=build --exclude=examples/**`	✅ Succeeded	<1s	View ↗

☁️ Nx Cloud last updated this comment at 2026-05-10 21:12:24 UTC

github-actions · 2026-05-10T21:07:05Z

🚀 Changeset Version Preview

5 package(s) bumped directly, 9 bumped as dependents.

🟨 Minor bumps

Package	Version	Reason
`@tanstack/angular-form`	1.31.0 → 1.32.0	Changeset
`@tanstack/form-core`	1.31.0 → 1.32.0	Changeset
`@tanstack/solid-form`	1.31.0 → 1.32.0	Changeset
`@tanstack/svelte-form`	1.31.0 → 1.32.0	Changeset
`@tanstack/vue-form`	1.31.0 → 1.32.0	Changeset
`@tanstack/react-form`	1.31.0 → 1.32.0	Dependent
`@tanstack/react-form-nextjs`	1.31.0 → 1.32.0	Dependent
`@tanstack/react-form-remix`	1.31.0 → 1.32.0	Dependent
`@tanstack/react-form-start`	1.31.0 → 1.32.0	Dependent

🟩 Patch bumps

Package	Version	Reason
`@tanstack/form-devtools`	0.2.26 → 0.2.27	Dependent
`@tanstack/lit-form`	1.24.0 → 1.24.1	Dependent
`@tanstack/preact-form`	1.29.6 → 1.29.7	Dependent
`@tanstack/react-form-devtools`	0.2.26 → 0.2.27	Dependent
`@tanstack/solid-form-devtools`	0.2.26 → 0.2.27	Dependent

…form into fix-angular-array-mode

pkg-pr-new · 2026-05-10T21:12:12Z

More templates

@tanstack/angular-form

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

@tanstack/form-core

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

@tanstack/form-devtools

npm i https://pkg.pr.new/@tanstack/form-devtools@2171

@tanstack/lit-form

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

@tanstack/preact-form

npm i https://pkg.pr.new/@tanstack/preact-form@2171

@tanstack/react-form

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

@tanstack/react-form-devtools

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

@tanstack/react-form-nextjs

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

@tanstack/react-form-remix

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

@tanstack/react-form-start

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

@tanstack/solid-form

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

@tanstack/solid-form-devtools

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

@tanstack/svelte-form

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

@tanstack/vue-form

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

commit: 1ff14df

sentry · 2026-05-10T21:12:55Z

Codecov Report

❌ Patch coverage is 96.15385% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 96.51%. Comparing base (6892ed0) to head (1ff14df).
⚠️ Report is 208 commits behind head on main.

Files with missing lines	Patch %	Lines
packages/angular-form/src/tanstack-field.ts	96.15%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2171      +/-   ##
==========================================
+ Coverage   90.35%   96.51%   +6.15%     
==========================================
  Files          38        7      -31     
  Lines        1752       86    -1666     
  Branches      444        3     -441     
==========================================
- Hits         1583       83    -1500     
+ Misses        149        3     -146     
+ Partials       20        0      -20

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

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

425840e

autofix-ci Bot and others added 3 commits May 10, 2026 21:07

ci: apply automated fixes and generate docs

16e1818

chore: fix build

416e2a4

Merge branch 'fix-angular-array-mode' of https://github.com/TanStack/…

1ff14df

…form into fix-angular-array-mode

crutchcorn merged commit 75b3202 into main May 10, 2026
9 checks passed

crutchcorn deleted the fix-angular-array-mode branch May 10, 2026 21:13

github-actions Bot mentioned this pull request May 10, 2026

ci: Version Packages #2168

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

fix(angular-form): prevent full array re-renders in array mode#2171
crutchcorn merged 4 commits into
mainfrom
fix-angular-array-mode

crutchcorn commented May 10, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented May 10, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Poem

❌ Failed checks (1 warning)

Uh oh!

nx-cloud Bot commented May 10, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 10, 2026 •

edited

Loading

Uh oh!

pkg-pr-new Bot commented May 10, 2026

Uh oh!

sentry Bot commented May 10, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

crutchcorn commented May 10, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented May 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

❌ Failed checks (1 warning)

Uh oh!

nx-cloud Bot commented May 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented May 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🚀 Changeset Version Preview

🟨 Minor bumps

🟩 Patch bumps

Uh oh!

pkg-pr-new Bot commented May 10, 2026

Uh oh!

sentry Bot commented May 10, 2026

Codecov Report

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

crutchcorn commented May 10, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented May 10, 2026 •

edited

Loading

nx-cloud Bot commented May 10, 2026 •

edited

Loading

github-actions Bot commented May 10, 2026 •

edited

Loading