What the Hell is ErrorStateMatcher

Why ain’t my mat-error pop up ?


Last day I was trying to build a custom validator for my Reactive Form, with a Angular Material Form field.
As a usual milk drinker I was totally copying the way of error handling depicted on Angular Material’s document, here it is


It looks like this
<mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>


A *ngIf to check the form control’s valid state, that’s simple obviously, but I just couldn’t get it to show up no matter how many balls I crammed into the damn form-field, ...got only two, actually.

I made a little test code on StackBlitz

See in the screenshot I just use a boolean variable to control the visibility of mat-error, and a button to set that variable.


Even in this simplest case, the mat-error never wake up to live.

I was going to punch this…


...Until this obssesive programmer guy with his blog saved my day.





https://obsessiveprogrammer.com/validating-confirmation-fields-in-angular-reactive-forms-with-angular-material/



What ErrorStateMatcher? no one said nothing about it…





Quote this paragraph in the blog:





“The errorStateMatcher directive is built in to Angular Material, and provides the ability to use a custom method to determine the validity of a <mat-form-field> form control, and allows access to the validity status of the parent to do so.”





What !? If you take a look back at Angular Material’s Form field overview, there is nothing mentioned about ErrorStateMatcher, even the word itself never shows up in the page.





It’s just an overview I know… I am a milk drinker.

Thanks to the obsessive programmer dude I implemented my LeastRequireErrorMatcher class which inherits ErrorStateMatcher.


It accepts an array of field names for its constructor, and check if at least one of these field controls has value, if not, return error object.

With binding the instance of LeastRequireErrorMatcher to mat-input, the expected error message finally emerged, HURRAH~!