md-error element is showed only when input loses its focus (at least on the first interaction)

[iliketomatoes]

Bug, feature request, or proposal:

bug (bad UX)

What is the expected behavior?

I would expect md-error elements to be shown as soon as the error is triggered.
Or at least, I would like to choose whether to show the error ASAP or only when the input element loses its focus.

What is the current behavior?

Errors are shown only when an input element loses its focus, at least for the first interaction.

What are the steps to reproduce?

For example make a little form like this password change form:

The validator on the second input element correctly binds an error to the input form-control because the two passwords are different. Though md-error is shown only when the input loses its focus, aka only when the user clicks somewhere else.

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

This is a case of bad UX, because the user should be clicking somewhere else in order to make md-error appear, but the save button is disabled due to the above-mentioned error. So the user is kind of stuck.

When md-error elements weren't available, I used to use md-hint elements with red colored text, and I could see every error as soon as it was triggered.

I don't think Material 2 should care about when to show an error, because that issue can be managed programmatically. If the developer wants to postpone errors visibility, that can be done with Angular asyncValidators. Especially after we finally have found a way to implement the debounce operator in asynchronous validation. See this angular/angular#6895.

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

@angular/cli: 1.0.2
node: 7.9.0
os: linux x64
@angular/animations: 4.1.1
@angular/common: 4.1.1
@angular/compiler: 4.1.1
@angular/core: 4.1.1
@angular/forms: 4.1.1
@angular/http: 4.1.1
@angular/material: 2.0.0-beta.3
@angular/platform-browser: 4.1.1
@angular/platform-browser-dynamic: 4.1.1
@angular/router: 4.1.1
@angular/cli: 1.0.2
@angular/compiler-cli: 4.1.1

on every broswers.

[willshowell]

I suspect they're following the material guidelines on this one:

Text field input

Helper text may be included before, during, or after a user interacts with each field on a form.

Show error text only after user interaction with a field. If the user inputs incorrect data, helper text may transform into error text.

It's calculated here, so maybe you can mark it as touched on (focus)?

[iliketomatoes]

All right @willshowell, thanks for the heads up!

[AndreiZaman]

+1 faced with the same issue, this option should be configurable

[angular-automatic-lock-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.}