fix(forms): remove animationstart listener on component destroy to prevent memory leak

arturovt · arturovt · commit fe82db1cd51e · 2026-04-13T13:14:32.000+03:00
The `watchValidity` method in `AnimationInputValidityMonitor` was registering
an anonymous arrow function via `addEventListener` with no corresponding
`removeEventListener` call.

In V8, each closure is represented as a `JSFunction` holding a strong pointer
to a heap-allocated `Context` object containing captured variables
(`VariableLocation::CONTEXT` slots, decided at parse time by
`Scope::MustAllocateInContext`). In Blink, DOM event listeners are stored in
the element's `EventTargetData::event_listener_map` as `JSEventListener`
wrappers backed by a `v8::Persistent&lt;JSFunction&gt;` handle — a strong cross-heap
reference that keeps the function alive as long as the element is alive.

Because the callback passed to `watchValidity` closes over the calling
component/directive (which itself holds a reference back to the element), this
produced a cross-heap reference cycle:

```
  HTMLInputElement (Blink/Oilpan)
    └── EventTargetData → JSEventListener → v8::Persistent&lt;JSFunction&gt;
          └── Context → callback closure
                └── component → HTMLInputElement  ← cycle
```

Neither V8's nor Blink's GC could independently break this cycle because it
crosses the V8/Oilpan heap boundary. The element was therefore never collected
after being removed from the DOM.

The fix stores the listener in a named local variable and registers its removal
via `DestroyRef.onDestroy`, tying cleanup to the lifetime of the component that
owns the element. This ensures `removeEventListener` is called with the exact
same `JSFunction` reference, causing Blink to drop the `v8::Persistent` handle
and allowing both the function and the element to become GC-eligible.
diff --git a/packages/forms/signals/src/directive/control_native.ts b/packages/forms/signals/src/directive/control_native.ts
@@ -59,7 +59,7 @@ export function nativeControlCreate(
 
   // TODO: move extraction to first update pass?
   if (isInput(input) && inputRequiresValidityTracking(input)) {
-    validityMonitor.watchValidity(input, () => parser.setRawValue(undefined));
+    validityMonitor.watchValidity(parent.destroyRef, input, () => parser.setRawValue(undefined));
   }
 
   parent.registerAsBinding();
diff --git a/packages/forms/signals/src/directive/input_validity_monitor.ts b/packages/forms/signals/src/directive/input_validity_monitor.ts
@@ -6,8 +6,15 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {DOCUMENT, isPlatformBrowser} from '@angular/common';
-import {Injectable, CSP_NONCE, inject, OnDestroy, PLATFORM_ID, forwardRef} from '@angular/core';
+import {DOCUMENT} from '@angular/common';
+import {
+  Injectable,
+  CSP_NONCE,
+  inject,
+  type OnDestroy,
+  forwardRef,
+  type DestroyRef,
+} from '@angular/core';
 
 /**
  * Service that monitors validity state changes on native form elements.
@@ -18,20 +25,27 @@ import {Injectable, CSP_NONCE, inject, OnDestroy, PLATFORM_ID, forwardRef} from
  */
 @Injectable({providedIn: 'root', useClass: forwardRef(() => AnimationInputValidityMonitor)})
 export abstract class InputValidityMonitor {
-  abstract watchValidity(element: HTMLInputElement, callback: () => void): void;
+  abstract watchValidity(
+    destroyRef: DestroyRef,
+    element: HTMLInputElement,
+    callback: () => void,
+  ): void;
   abstract isBadInput(element: HTMLInputElement): boolean;
 }
 
 @Injectable()
 export class AnimationInputValidityMonitor extends InputValidityMonitor implements OnDestroy {
   private readonly document = inject(DOCUMENT);
   private readonly cspNonce = inject(CSP_NONCE, {optional: true});
-  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
   private readonly injectedStyles = new WeakMap<Document | ShadowRoot, HTMLStyleElement>();
 
   /** Starts watching the given element for validity state changes. */
-  override watchValidity(element: HTMLInputElement, callback: () => void): void {
-    if (!this.isBrowser) {
+  override watchValidity(
+    destroyRef: DestroyRef,
+    element: HTMLInputElement,
+    callback: () => void,
+  ): void {
+    if (typeof ngServerMode === 'undefined' || ngServerMode) {
       return;
     }
 
@@ -40,14 +54,18 @@ export class AnimationInputValidityMonitor extends InputValidityMonitor implemen
       this.injectedStyles.set(rootNode, this.createTransitionStyle(rootNode));
     }
 
-    element.addEventListener('animationstart', (event: Event) => {
+    const onAnimationStart = (event: Event) => {
       const animationEvent = event as AnimationEvent;
       if (
         animationEvent.animationName === 'ng-valid' ||
         animationEvent.animationName === 'ng-invalid'
       ) {
         callback();
       }
+    };
+    element.addEventListener('animationstart', onAnimationStart);
+    destroyRef.onDestroy(() => {
+      element.removeEventListener('animationstart', onAnimationStart);
     });
   }
 

Original file line number	Diff line number	Diff line change
`@@ -59,7 +59,7 @@ export function nativeControlCreate(`
`59`	`59`
`60`	`60`	`// TODO: move extraction to first update pass?`
`61`	`61`	`if (isInput(input) && inputRequiresValidityTracking(input)) {`
`62`		`- validityMonitor.watchValidity(input, () => parser.setRawValue(undefined));`
	`62`	`+ validityMonitor.watchValidity(parent.destroyRef, input, () => parser.setRawValue(undefined));`
`63`	`63`	`}`
`64`	`64`
`65`	`65`	`parent.registerAsBinding();`