I am using the kendo auto complete that has required and minlength validation attached to it. I am unable to get the error messages to show correctly.
The code below does show the messages however causes error messages when trying to access the component in the javascript via @Viewchild the component is not accessable.
<
kendo-autocomplete
#
autocomplete
=
"ngModel"
name
=
"nameSearch"
[(ngModel)]="selectedResult"
[data]="searchResults"
[valueField]="'displayName'"
[filterable]="true"
[tabIndex]="0"
[placeholder]="'Scientific Name or Common Name'"
class
=
"search-box"
required
minlength
=
"2"
>
</
kendo-autocomplete
>
<
div
*
ngIf
=
"autocomplete.errors && autocomplete.touched"
>
<
small
*
ngIf
=
"autocomplete.errors?.required"
class
=
"alert alert-danger"
>Please enter a name or common name to search.</
small
>
<
small
*
ngIf
=
"autocomplete.errors?.minlength"
class
=
"alert alert-danger"
>You must enter at least 2 characters to search.</
small
>
</
div
>
If I change the html to #autocomplete="kendoAutoComplete" then I can access it in the code but the validation messages go away. What am I doing wrong?