bug(mat-form-field): mat-error not displayed when form field is in an error state.

[jackwootton]

Reproduction

The Stackllitz app (https://stackblitz.com/edit/yz1dhz-m5re6l) renders two form controls in a form group:

1. A mat-select
2. A custom form field control (wraps Codemirror)

Both form controls are immediately invalid because they are initailized with null and have a required validator. The error message for each form control is displayed in <mat-error>.

Steps to reproduce:

1. Select "Foo" from the <mat-select> form control to set the corresponding validator on the second form control (the custom form field).
2. The error message for the second form control is correctly displayed { "required": true, "message": "Must be Foo" }.
3. Enter the value "Foo" into the second form control to move the form control to a valid state.
4. The <mat-hint> is shown. All good so far :)
5. Select "Bar" from the first form control to set a different validator.
6. The second form control is in an error state and the form field is displayed with a solid red color underline.
7. <mat-error> is NOT displayed and the <mat-hint> is.

Expected Behavior

<mat-hint> is hidden and <mat-error> is displays { "message": "Must be Bar" }

Actual Behavior

<mat-error> is hidden and <mat-hint> is displays I am a hint.

Environment

• Angular: 9.1.6
• CDK/Material: 9.2.3
• Browser(s): Chrome Version 83.0.4103.116 (Official Build) (64-bit)
• Operating System (e.g. Windows, macOS, Ubuntu): ArchLinux

[jelbourn]

10/10, solid issue report

[jackwootton]

Popping in to see if there was any estimate of when this issue could be addressed?