Binding the text to a variable?

[Angel]

Is there a way to bind whatever I write in the AutoCompleteTextView to a variable and add a placeholder? Checked the API documentation but couldn't find a way to do so. Also tried using ngModel but I get the error "No value accessor for form control with unspecified name attribute".

I'm using NativeScript 3.1 with Angular and UI next version 3.1.0.

[Nick Iliev]

Hello Angel Ramos,

There is no out-of-the-box functionality which allows you to listen to the text input in your RadAutoCompleteTextView. The reason is that this control is meant to provide a suggestion view while you can use plain textView to implement logic where you can grab the users input. With RadAutoCompleteTextView the main idea is to provide a predefined list of suggestions.
This said one possible workaround would be to entirely separate the UI responsible for entering new suggestions (via TextField or TextView) and use the RadAutoCompleteTextView for the entered suggestion only.

There is another approach and it is to access the native controls and extend the logic behind them. For example, in Android, you get a reference to the native android.widget.EditText (currently AppCompatEdittext which simply extend the base class EditText) and overwrite the textChange events.
e.g.

onAutoCompleteLoaded(args) {
    var autocmp = args.object;

    console.log("autocmp: " + autocmp)

    var nativeTField = autocmp.android.getTextField();
    console.log("nativeTextField: " + nativeTField) // AppCompatEditText

    nativeTField.addTextChangedListener(new android.text.TextWatcher({

        afterTextChanged(s) {
            console.log("afterTextChanged");
            console.log(s);
        },
        beforeTextChanged(s, start, count, after) {
            console.log("beforeTextChanged");
            console.log(s);
            console.log(start);
            console.log(count);
            console.log(after);
        },
        onTextChanged(s, start, before, count) {
            console.log("onTextChanged");
            console.log(s);
            console.log(start);
            console.log(before);
            console.log(count);
        }
    }));
}

The solution above is not recommended approach as it will break the main idea of RadAutoCompleteTextView by mixing the standard text view functionality with the suggestion view one and it will also work on Android only. 

Regards,
Nikolay Iliev
Progress Telerik

[Angel]

Hi Nikolay, can you explain a bit more the first solution? Not sure if I understand. I want to have a list of suggestions getting filtered with what I'm writing. I also tried the second solution but for some reason when I assign the s to a variable, the variable is not taking the value of s, even though im seeing that the s is changing through the console.log.

[Nick Iliev]

Hi Angel,

If you want to filter the suggestions based on what the user has entered in the text field you can use the exposed completion and suggest modes.

The completion mode has two options: SstartsWith and Contains.

In StartsWith mode, the autocomplete shows only suggestions that start with the typed phrase.
In Contains mode, the autocomplete shows only suggestions that contain the typed phrase.

So using this feature will filter the suggestion without having to write extra code.Real life examples demonstrating the completion mode can be fond here (NativeScript core) and here (NativeScript Angular)

The suggest mode has three options: Suggest, Append and SuggestAppend
More about how the different options works can be found in this article (also real life examples can be found in our SDK application linked above in the previous examples).

Regarding the approach to manually set a default hint (placeholder) value for your text field n the AutoComplte (Android).

If you still need to assign an initial value to your text field that is part of the RadAutomCompleteTextView then you can access the native field and use the native methods to assign the initial value.

e.g. Let's assume that we are working with this example
First, we will need to access the loaded event of our RadAutoCompleteTextView and provide callback

<au:RadAutoCompleteTextView loaded="onAutoCompleteLoaded" >

Now in the code-behind file, we can access the native view and use the native method setText to assign a default value.

export function onAutoCompleteLoaded(args) {
    var autocmp = args.object;
    var nativeTField = autocmp.android.getTextField();

    nativeTField.setHint("Enter Country Name"); // default placeholder (hint) value

}

Now with setHint, we have set a default hint (placeholder) for our RadAutoCompleteTextView.
The same way you can use the native methods you need (e.g. like setText or other methods) or overwrite the native textChange listeners as shown in my previous post.

Regards,
Nikolay Iliev
Progress Telerik

[Angel]

Hi Nikolay thank you for answering and for providing solutions they are big help. I was having a bit of trouble binding the t from the component inside the TextWatcher, so I tried changing the sample you provided to this: 

nativeTField.addTextChangedListener((text: android.text.TextWatcher) => {
    text.onTextChanged = (s: string, a: number, l: number, o: number) =>{
        console.log(s);
        this.someVariable = s;
    };
});

Didn't have any luck with that. Is this possible? (Binding this into TextWatcher)

[Nick Iliev]

Hello Angel,

When you are overwriting the native listeners using the data conversion techniques you are in fact using plain JavaScript and the scope rules are applied. That means that this would have different context inside the addEventListener callback. To resolve that you can "cache" the reference to this.
e.g

var that = this;

nativeTField.addTextChangedListener((text: android.text.TextWatcher) => {
    text.onTextChanged = (s: string, a: number, l: number, o: number) =>{
        console.log(s);
        that.someVariable = s; // using the "cache" reference with that
    };
});

Regards,
Nikolay Iliev
Progress Telerik

[Angel]

Thank you for your help Nikolay that worked.