Start a new topic

Using RadAutoCompleteTextView


I am getting errors trying to get the RadAutoCompleteTextView working on a form.  The error being generated is:  

LOG from device Galaxy S9: ERROR TypeError: _co.onTextChanged is not a function

I have added a CustomXML control to a form, and the following code:


<StackLayout class="p-20">

 <StackLayout class="input-field">

 <Label text="Select a location" class="label m-b-5"></Label>

 <RadAutoCompleteTextView [items]="autocompleteLocations" suggestMode="Suggest"

 completionMode="StartsWith" displayMode="Plain" (textChanged)="onTextChanged($event)">

 <SuggestionView tkAutoCompleteSuggestionView>

 <ng-template tkSuggestionItemTemplate let-item="item">

 <GridLayout columns="auto,*">

 <!--<Image height="40" col="0" [src]="getImageName(item.text)"></Image> -->

 <Label col="0" [text]="img"></Label>

 <Label col="1" [text]="item.text" class="p-l-5"></Label>





 <StackLayout class="hr-light"></StackLayout>



The typescript code to support this is:


// Write your custom logic for TestListMobilFormViewComponent here.

// Changes to this file are preserved when the app regenerates.

// Find more information on


import { Inject, Injector } from '@angular/core';

import { TestListMobilFormViewBaseComponent } from '@src/app/modules/leftovers/test-list-mobil-form/test-list-mobil-form.base.component';

import { Component, OnInit } from "@angular/core";

import { ObservableArray } from "tns-core-modules/data/observable-array";

import { TokenModel, RadAutoCompleteTextView } from "nativescript-ui-autocomplete";

const locations = ["bedroom", "bathroom", "laundrey"];

// let currentLocation: string ="";

export class TestListMobilFormViewComponent extends TestListMobilFormViewBaseComponent {


autocompleteLocations: ObservableArray<TokenModel>;

constructor(@Inject(Injector) injector: Injector) {



this.autocompleteLocations= new ObservableArray<TokenModel>();

locations.forEach((location) => {

this.autocompleteLocations.push(new TokenModel(location, undefined));



this.$config.mobileform0.onBeforeSubmit = ({ form }) => {

form.additionalFields.location = currentLocation



public onTextChanged(e) {

console.log("Text Changed: " + e.text);

currentLocation = e.text;



Note:  it works fine (that is, a get an autocomplete list on my form with the 3 values) until I had the textChanged event to the xml, and the associated typescript code to output the selection to the console.

Any suggestions on what I am doing wrong would be very appreciated.

1 Comment

Hello Janine,

I tested the provided code snippet and everything appears to be working correctly. The autocomplete is suggesting the provided 3 words and the console is outputting the text every time a symbol is added or removed. Can you please delete the <app-name>/platforms and <app-name>/.cloud folders, remove the app from the device, and then build and install it again? My assumption is that during the livesync process the updated TS/JS file was not synced correctly and this is causing the "is not a function" error.

The other thing that comes to my mind is to ensure that you have added the custom XML element in the view associated with the TypeScript file in which you have added the custom code. I assume you are doing so, nevertheless, this is another case that would lead to the reported error.



Login or Signup to post a comment