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

Inizia con i tre progetti di riproduzione collegati per mat-form-field/input, mat-tab e mat-menu, quindi riproduci i cambi di route ed esamina gli heap snapshot di Chrome. Confronta i nodi scollegati che si accumulano tra le versioni di Angular Material descritte. Il lavoro è completato quando i nodi DOM scollegati rilevanti vengono raccolti dal garbage collector e non si accumulano dopo navigazioni ripetute.

Scritto dal modello di indicizzazione a partire dal testo della issue.