Autocomplete validation errors

[schakravarty]

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>

[schakravarty]

So the statement "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. " is wrong. I can access the object in code however it does not see it as having the filterchange event when I try to subscribe to it in the ngAfterViewInit hook.

[Svet]

Hi Paul,

I am not sure that I understand the reported undesired behavior.

Check the following example, which demonstrates how we can subscribe to an Observable generated from the (filterChange) event of the AutoComplete in ngAfterViewInit:
https://stackblitz.com/edit/angular-fybszc?file=app/app.component.ts

I hope this helps. Let me know in case I am missing something or further assistance is required for this case.

Regards,
Svetlin
Progress Telerik

[schakravarty]

Svetlin,

Thanks for your post. However you are missing the point. 1) I am binding the autocomplete to a string model ([(ngModel)]="selectedResult"). 2) To get the validation errors to show on the screen correctly, you need to get a handle to the model #autocomplete="ngModel". This way I can check the errors and show the correct one. With these in place, in the ngAfterviewInit function the autocomplete object no longer contains the filterChange event and therefore causes an error as it is "undefined". Your example does not meet any of these requirements. The problem happens when you bind to a model like in my code above.

 

Paul

[Svet]

Hi Paul,

Thank you for the additional details.

I updated the example so that the AutoComplete is bound to a template driven form control. I then used Angular's @ViewChild to access the created instance of the AutoComplete in the ngAfterViewInit lifecycle hook:
https://stackblitz.com/edit/angular-fybszc-fgpone?file=app%2Fapp.component.ts

The functionality seems to be as expected. Let me know in case I am missing something or further assistance is required for this case. Thank you in advance.

Regards,
Svetlin
Progress Telerik

[schakravarty]

This helped. I thought I tried this way with no luck. But once I made proper changes to the code, it worked.

 

Thanks,

Paul