Nativescript-angular: [(ngModel)]="selectedIndex" not working in TabView

[devna13]

<TabView> //works fine 

<TabView #tabElem [(ngModel)]="selectedIndex"> //will cause error in both ios & android



md5-677769f46dffa269f82160438bcf5ebd




JS: EXCEPTION: Error in pages/community/list-community.html:5:18 caused by: No value accessor for form control with unspecified name attribute
JS: ORIGINAL EXCEPTION: No value accessor for form control with unspecified name attribute
JS: ORIGINAL STACKTRACE:
JS: Error: No value accessor for form control with unspecified name attribute



md5-96bf92ee048acaaaf3ccae49e0ed327a



    "tns-ios": {
      "version": "2.5.0-2016-11-3-2"
    },
    "tns-android": {
      "version": "2.5.0-next-2016-11-21-1415"
    }

    "tns-core-modules": "2.4.0-2016-10-17-4407"
    "nativescript-angular": "1.1.2",

    "@angular/common": "2.1.2",
    "@angular/compiler": "2.1.2",
    "@angular/core": "2.1.2",
    "@angular/forms": "2.1.2",
    "@angular/http": "2.1.2",
    "@angular/platform-browser": "2.1.2",
    "@angular/platform-browser-dynamic": "2.1.2",
    "@angular/router": "3.1.2",

[friedolinfoerder]

Same here. I'm struggling with this for hours now =/

[leocaseiro]

I Confirm this issue!

First, I've tried to set a name, like so: <TabView name="tabname"

So I got the error:

Error in app.component.html:3:28 caused by: No value accessor for form control with name: 'tabname'

Then, I've tried to set ngDefaultControl:

No errors, but the ngModel is not changing. It keeps 0 which is my default value, set on my constructor.

[leocaseiro]

It seems be related to #525 as I'm testing on iOS as well.

[leocaseiro]

I've tried to implement using Nativescript selectedIndexChangedEventand still not binding:

<GridLayout>
    <TabView (loaded)="onTabViewLoaded($event)">
        <template tabItem title="Tab A">
            <StackLayout>
                <label text="Tab A {{selectedIndex}}"></label>
            </StackLayout>
        </template>
        <template tabItem title="Tab B">
            <StackLayout>
                <label text="Tab B {{selectedIndex}}"></label>
            </StackLayout>
        </template>
        <template tabItem title="Tab C">
            <StackLayout>
                <label text="Tab C {{selectedIndex}}"></label>
            </StackLayout>
        </template>
    </TabView>
</GridLayout>

import { Component } from '@angular/core';

import { TabView, SelectedIndexChangedEventData } from "ui/tab-view";

@Component({
    selector: 'tabs',
    templateUrl: 'app/tabs.html'
})
export class Home {
    public selectedIndex: number = 0;

    onSelected(newIndex) {
        console.log('this.selectedIndex.before', this.selectedIndex); // correct
        this.selectedIndex = newIndex;
        console.log('this.selectedIndex.after', this.selectedIndex); // correct
    }

    onTabViewLoaded(args) {
        let customTabview = args.object;
        let self = this;
        customTabview.on(TabView.selectedIndexChangedEvent, (args: SelectedIndexChangedEventData) => {
            console.log('oldIndex', args.oldIndex);
            console.log('newIndex', args.newIndex);

            self.onSelected(args.newIndex);
        });
    }
}

The interesting is that the selectedIndex has been changed, I can see on my console.log, but the binding is not changing on my view.

I'm trying to find a way out to convert selectedIndex to an observable os something similar.

[hdeshev]

This turns out to be a bug in the value accessor implementation. The fix should land on master sometime tomorrow.

[leocaseiro]

Can't believe adding a single comma fixes that. I've tried so many other ways LOL!
Thanks @hdeshev

[leocaseiro]

PS: We need to make sure we import NativeScriptFormsModule