mat error message not shown when custom control is in error state using matInput

[Antoniossss]

Reproduction

Use StackBlitz to reproduce your issue:

https://stackblitz.com/edit/angular-w24ch3?file=src%2Fapp%2Fcustominput%2Fcustominput.component.html Steps to reproduce:

1. Focus on the input (do not enter anything)
2. Blur the input (click somewhere)
3. Focus input again

Expected Behavior

Error message is shown in the same moment when field enters error state

Actual Behavior

I have to focus again into the input to get error message displayed right

Environment

@angular-devkit/architect 0.1001.5 @angular-devkit/build-angular 0.1001.5 @angular-devkit/build-ng-packagr 0.1001.5 @angular-devkit/core 10.1.5 @angular-devkit/schematics 10.1.5 @angular/cdk 10.2.4 @angular/material 10.2.4 @schematics/angular 10.1.5 @schematics/update 0.1001.5 ng-packagr 10.1.2 rxjs 6.6.3 typescript 4.0.3

looks like OS/browser agnostic

[mmalerba]

I looked into this and it seems like there's something wrong with the example you posted. I tried adding a <mat-label> to it and just got console errors. Could you try fixing the example and see if the issue still reproduces? Here's a working example that it looks like that may have been derived from: https://stackblitz.com/angular/oopplevykkv?file=src%2Fapp%2Fform-field-custom-control-example.ts

[Antoniossss]

@mmalerba Thanks for looking into it. It works with mat-label (it was missing conditional id access)

https://stackblitz.com/edit/angular-w24ch3?file=src%2Fapp%2Fcustominput%2Fcustominput.component.ts