Menu
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
629
Simple autocompleteStart by creating the autocomplete panel and the options displayed inside it. Each option should be defined by a mat-option tag. Set each option's value property to whatever you'd like the value of the text input to be when that option is selected.
Create custom validator for autocomplete Working with reactive forms, the easiest way to solve this issue is to write a custom form validator. This function evaluates the value of a control and return a validation error if the value is a string type.
You can remove the formControl-binding from your input and when you select an option you set that id to your form. You are already calling such a function (onSelectionChange)="onEnteredAccount(accountOption)" in which you can do that.
Angular Interview Q & A series The <mat-autocomplete>, an Angular Directive, is used as a special input control with an inbuilt dropdown to show all possible matches to a custom query. This control acts as a real-time suggestion box as soon as the user types in the input area.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
