bug(input/mat-form-field): Detached DOM nodes are not garbage collected and results in memory leak when switching between lazy loaded routes

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

---

### Description

**Background:**
I've been using angular material for a couple of years together with a team and recently our application has grown so that we have around 1400 inputs on one screen for example. We 've come across on problems that our application started to becoming slow after switching between different screens/routes after a while. It turned out to be memory leaks (Detached nodes that are not garbage collected) and some of the leaks we 've managed to fix because of missing unsubscribtion in our application but others we can't fix and seems to be input and mat-form-field related. We've implemented a workaround that we reload page when memory hits defined limit so we can still deliver a product however angular material related memory leaks are beyond our control.

**Description:**
First of all I've created a simple example project that has two screens each in separate module screen-one.module.ts and screen-two.module.ts and those modules are lazy loaded and has its own routes 'screen-one' and 'screen-two'. Screen one is just empty screen so it doesn't have memory leaks and is used as reference and screen two contains some material components.

**Steps to reproduce:**
Example 1: [StackBlitz Material input example](https://stackblitz.com/github/EverydayWebDev/simple-material-project/tree/mat-input)
Screen two contains only mat-form-field with nested input.
1. Start with Screen One
2. Navigate to screen two by clicking Screen Two button on left menu
3. Navigate back to Screen One by clicking on menu button
4. Open Chrome Dev tools navigate to the memory tab (in case of stackblitz select VM instance webcontainer) and take a heap snapshot


Actual Behavior:
Dev tools memory profiling shows 1 Detached Node

Commencez par les trois projets de reproduction liés pour mat-form-field/input, mat-tab et mat-menu, puis reproduisez les changements de route et examinez les instantanés du tas de Chrome. Comparez les nœuds détachés qui s’accumulent entre les versions d’Angular Material décrites. Le travail est terminé lorsque les nœuds DOM détachés concernés sont récupérés par le garbage collector et ne s’accumulent pas après des navigations répétées.

Rédigé par le modèle d'indexation à partir du texte de l'issue.