Components: mat-select doesn't show mat-error on submit

[sam-lex]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Should show mat-error on submit (if invalid)

What is the current behavior?

mat-select becomes red as expected, but mat-error doesn't appear until clicked/touched.
doing control.markAsTouched(), control.markAsDirty() on submit, also doesn't work.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-issue-yxmtsq

1. create mat-select + mat-error (I'm using required with ReactiveForms - Validators.required)
2. add a submit button.
3. Without touching the select, click on submit.
   select becomes red (invalid), but mat-error doesn't appear until you click/touch on the select.

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular: ^4.4.4,
"@angular/cdk": "^2.0.0-beta.12",
"@angular/material": "^2.0.0-beta.12",
"typescript": "^2.5.2",
OS: macOS Sierra
browser: Chrome

Is there anything else we should know?

Thanks :D

[sam-lex]

ok, I solved like this:

<mat-form-field>
  <mat-select placeholder="Fruits" #fruitSelect required [formControl]="fruit">
    <mat-option *ngFor="let f of fruits" [value]="f">
      {{f}}
    </mat-option>
  </mat-select>
  <mat-error *ngIf="fruitSelect.errorState && fruit.hasError('required')">
    <strong>required</strong>
  </mat-error>
</mat-form-field>

I added a variable #fruitSelect to mat-select,
then, on mat-error, I added a condition for fruitSelect.errorState.

I first tested with only fruitSelect.errorState, this worked. For me would've been ok, since I only have 1 validator. But what if I had multiple validators?
so then I tested with && fruit.hasError('required'), and it also worked. 🤔

I have no idea why only *ngIf="fruit.hasError('required')" doesn't.

[crisbeto]

It's definitely a bug. Until #7640 gets in you should be able to work around it by calling changeDetectorRef.markForCheck() when the form is submitted.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}