Binding the text to a variable?

7 posts, 0 answers
  1. Angel
    Angel avatar
    4 posts
    Member since:
    May 2017

    Posted 05 Jul Link to this post

    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.

  2. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    294 posts

    Posted 06 Jul Link to this post

    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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  3. Angel
    Angel avatar
    4 posts
    Member since:
    May 2017

    Posted 06 Jul Link to this post

    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 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.
  4. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    294 posts

    Posted 07 Jul Link to this post

    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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  5. Angel
    Angel avatar
    4 posts
    Member since:
    May 2017

    Posted 07 Jul Link to this post

    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)

  6. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    294 posts

    Posted 10 Jul Link to this post

    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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  7. Angel
    Angel avatar
    4 posts
    Member since:
    May 2017

    Posted 10 Jul in reply to Nikolay Iliev Link to this post

    Thank you for your help Nikolay that worked.
Back to Top