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

Comienza con los tres proyectos de reproducción enlazados para mat-form-field/input, mat-tab y mat-menu; después, reproduce los cambios de ruta e inspecciona las instantáneas del heap de Chrome. Compara los nodos desconectados que se van acumulando entre las versiones de Angular Material descritas. Se considera terminado cuando los nodos DOM desconectados relevantes son recolectados por el garbage collector y no se acumulan después de repetir la navegación.

Escrito por el modelo de indexación a partir del texto del issue.