Components: mat-error doesn't show

[mluis]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

mat-error should show

What is the current behavior?

mat-error doesn't show

What are the steps to reproduce?

 <mat-form-field>
            <input name="address" #address="ngModel" [(ngModel)]="ethernet.address" matInput placeholder="Static IP Address">
            <mat-error *ngIf="!(ethernet.address | ValidateIP)">
              Invalid IP Address
            </mat-error>
 </mat-form-field>

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

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

Is there anything else we should know?

Angular 5.2.9

[CDDelta]

You need to provide a proper reproduction through StackBlitz to show the problem here. Is it possible that your ValidateIP pipe is not working correctly? I really doubt the problem is with material here.

[mluis]

@CDDelta as I change <mat-error> to <div> the message shows and hide as expected, but not as mat-error, naturally.

[CDDelta]

What version of material are you using?

[mluis]

"@angular/material": "^5.2.4"

[CDDelta]

Can you create a StackBlitz of your problem? I can't reproduce it. https://stackblitz.com/edit/angular-qdzsd4?file=app/form-field-error-example.html

[mluis]

@CDDelta thanks for the stackblitz. I managed to change it and the result is here: https://stackblitz.com/edit/angular-qdzsd4-6ejnba?file=app%2Fform-field-error-example.html
As you can see, I have hardcoded a string to the pipe test and if you change mat-error to div then the message appears.

[CDDelta]

Thanks for the repro. I managed to figure it out. Form field only shows error messages once it has been interacted with and runs this line of code to determine whether to show errors or hints
return (this._errorChildren && this._errorChildren.length > 0 && this._control.errorState) ? 'error' : 'hint';

With the way you are using pipes for validation, the form field has no way of knowing that the control is invalid as the control's error state is not set by the pipe. I recommend you create a validator for validating ips instead, that should fix your problem.

[josephperrott]

Closing as this is working as expected. The mat-error element only becomes visible through the form field control failing validation.

[mluis]

I'm trying to have the right behaviour with a validator but probably I'm doing something wrong. Would you mind checking out this stackblitz ? https://stackblitz.com/edit/angular-qdzsd4-6ejnba?file=app%2Fvalidate-ip.directive.ts

[kylecordes]

I realize the current behavior is not considered a bug, but I did find it surprisingly inconvenient and unexpected. There are many cases where the user will benefit from seeing a validation error immediately while still typing a value into a field; to do that, following the documentation, I have to write a custom error matcher. Of course this is easy to do, but it also seems like a long way around the block for what could be a trivial switch. So I guess this is also a feature request to improve the developer ergonomics around choosing between different common ways of using a mat-error.

[simeyla]

This stackoverflow question is useful

https://stackoverflow.com/questions/46745171/angular-material-show-mat-error-on-button-click

One common situation you'll see this is in a username/password form where you hit enter inside the 'password' field. This field does NOT count as touched - therefore the error won't show even though form.controls.password == 'INVALID'. Because form.controls.password.touched == false it's not showing.

To demonstrate this: try focussing (click) on password, then go back to username, then password and hit enter (with bad credentials). It will then show the error since it was previously touched.

---

Another reason this can occur:

Your [formGroup] directive is not applied directly to an HTML <form> tag
This may have occurred if you've got nested 'dumb' controls and you've applied [formGroup] inside a 'dumb control' to something that isn't a <form> tag.

The source for form_group_directive.ts shows that submitted=true is only set when the submit event is raised, which it won't be.

If you are passing an @angular/forms/formGroup object into a dumb control note that that object is NOT a formGroup directive.

[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._}