Skip to content

Leaked / detached form elements using control flow and formControlName #62388

@arobinson

Description

@arobinson

Which @angular/* package(s) are the source of the bug?

forms

Is this a regression?

No

Description

DOM nodes are not being destroyed despite them no longer being included in the view.

This was originally found in a new component I was creating that was using *ngTemplateOutlet and content projection. It was a wizard-like component that was showing steps. My desire was that each step would only be created once the user moved to it. This was implemented using directives, TemplateRef and *ngTemplateOutlet.

While I got the code working, I noticed that after leaving a step, the step's DOM was not destroyed, it was detached and still using memory.

I created a simple reproduction only using control flow and the issue is still observed. Despite no references to the form group or the formControlName in the active code, the Form elements are leaked. It appears that Angular is hanging onto the parent component's lifecycle and only when that component is destroyed is the leaked DOM cleaned up.

Image

Please provide a link to a minimal reproduction of the bug

https://github.com/arobinson/angular-detached-dom-form-control-name-issue

Please provide the exception or error you saw

Detached <form>

Please provide the environment you discovered this bug in (run ng version)

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 20.0.4
Node: 24.3.0
Package Manager: pnpm 9.13.2
OS: darwin arm64

Angular: 20.0.5
... common, compiler, compiler-cli, core, forms
... platform-browser, router

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.2000.4
@angular-devkit/core         20.0.4
@angular-devkit/schematics   20.0.4
@angular/build               20.0.4
@angular/cli                 20.0.4
@schematics/angular          20.0.4
rxjs                         7.8.2
typescript                   5.8.3
zone.js                      0.15.1

Anything else?

This is causing my wizard component to leak the DOM of every step that uses Angular forms. Only when the user dismisses the wizard is the memory reclaimed.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions