Angular material - autocomplete mat-error

Question

I'm using angular 6 with angular material 6.4.2 and I'm not able to show the error properly on an autocomplete.

I've created a stackblitz to show you the behavior, here's the link

My goal, is to show an error on an autocomplete stylized, as expected.

All the help is very welcomed :)

Thank you in advance.

Cheers, Marcelo

Answer 1

I had the same issue i used a work around with hint unfortunately

<mat-hint *ngIf="form.get('x').hasError('error')" i18n><span class="mat-error">Please choose a X</span></mat-hint>

Answer 2

this one works great for me:

( i use it to show dynamic error on mat-autocomplete form field at placeholder spot.

if no error - placeholder stay as should)

on your HTML:

[placeholder]="isPlaceHolderShowError('myFormControlName')"

on your TS:

isPlaceHolderShowError(myFormControlName) {
if (this.form.controls[myFormControlName].invalid && this.form.controls[myFormControlName].touched) {
  return 'this is my error text'
}
return 'this is the initial placehloder'

}

Answer 3

Your input was never in error state thus error was not displayed. Fixed example here:

https://stackblitz.com/edit/angular-faykhk-f9y3zc?file=app/autocomplete-filter-example.html

I just added required validator to force error state. If you want to apply some custom rules - write custom validator.