checkedChange event not working for switch component in vanilla nativescript

#1

Hi,
I am trying to implement switch component in vanilla nativescript.
Here is my code

<Switch checked="false" checkedChange="checkedChange" class="switch-component" />

exports.checkedChange = function(args) {
    var switchValue = args.object;
    switchValue.checked = !switchValue.checked;
    alert(switchValue.checked);
}

the chechedChange function is not executing.
Any suggestions !! Where I am doing mistake ?

Thanks

#2

@sagar1911

According to the official documentation and API reference, there is no checkedChange event on the Switch UI component. It’s only property checked can be used to base your logic around.

#3

Okay @Pete.K,
I found that here

I tried the tap event but that’s not working properly.
can you please suggest me a better idea !!?

#4

you bind the checked with some observable.

#5

Yay I did

<Switch checked="{{ switchValue }}" tap="isSwitch" class="switch-component" />

exports.isSwitch = function(args) {
    var switchValue = args.object;
    viewModel.switchValue = !switchValue.checked;
}

but not working consistently.

#6

that is wrong, you don’t need a tap event on it.
remove the tap event. just binding to the observable is enough

#8

It’s fair to mention that there is a checkedChange event hook. At least in the NAN set-up, I use it like so:

<Switch right
    class="loop-switch"
    [checked]="isAvailableOffline"
    (checkedChange)="toggleOffline($event)"></Switch>

Also in the toggleOffline function, I have to manually check if it’s the initial check, because it will fire when the two-way binding is set (probably not a problem on PAN).

if (this._initialCheck) {
    this._initialCheck = false;
    return;
}
#9

Is there a checkedChange event in vanilla NativeScript? As far as I can tell, there’s not.

#10

There is, but you have to attach it from code behind.

#11

Thanks for the info, multishiv19, but I’m still searching the docs… Do I need to add AddEventListener in the code behind file? If so, is that attached to the switch control itself?

For context, what I really want to do is hide/display controls on the page based on the switch’s state. I tried databinding the controls and the switch to the same variable, but that doesn’t seem to work. For example:

<Switch checked="{{ eventData.useAlt }}"/>

<TextField hint="Phone number" text="{{ eventData.toPhone }}" 
visibility="{{ eventData.useAlt ? 'visible' : 'collapsed' }}"/>

I’m guessing, after a couple hours of searching, that I need to establish my own event listener, but the docs I’ve found so far aren’t very helpful for vanilla {N}

#12

@dlcole
That seems to work just fine
Link: https://play.nativescript.org/?template=play-js&id=PlMeDh

#13

@dlcole
Here is a version with checkedChange listener if you are looking for that

Link: https://play.nativescript.org/?template=play-js&id=PlMeDh&v=2

Cheers! :slight_smile:

#14

@multishiv19
That’s perfect! Thanks so much!

Set value of multiple controls on load or navigatedto