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

mat-form-field/input、mat-tab、mat-menu の3つのリンクされた再現プロジェクトから始め、次にルートの切り替えを再現して Chrome のヒープスナップショットを調査します。説明されている Angular Material のバージョン間で、蓄積している detached node を比較します。繰り返しナビゲーションした後に、対象となる detached DOM node がガベージコレクションされ、蓄積しないことを確認できれば完了です。

索引モデルが issue の本文から書いたものです。