5

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

lmarcelocc
  • 1,301
  • 11
  • 21

3 Answers3

9

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>
Ricardo Saracino
  • 1,345
  • 2
  • 16
  • 37
  • nice workaround. Not ideal but at least we can put an error under the field. Any luck in colouring the auto-complete red? – Mattijs Jun 26 '19 at 13:47
0

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'

}

David Buck
  • 3,752
  • 35
  • 31
  • 35
aris
  • 409
  • 6
  • 8
-1

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.

Antoniossss
  • 31,590
  • 6
  • 57
  • 99
  • Hi Antoniossss, thank you ofr your answer. I forgot to add the FormArray part to the code, I've just updated the stackblizt link. Can you please take a look at it ? – lmarcelocc Aug 08 '18 at 10:45