TextField onChange / propertyChange / change event?

#1

Hi all,

I’m trying to get an event handler called whenever the user types something in a TextField. In this particular case, it’s a secure password TextField. The event should simply fire after every change.

I’ve tried:

<TextField propertychange="{{ onChange }}" ... />
<TextField propertyChange="{{ onChange }}" ... />
<TextField change="{{ onChange }}" ... />
<TextField onChange="{{ onChange }}" ... />

but nothing works.

Anybody any ideas?

Thanks!

:slight_smile:

#2

Give textChange a try.

#3

Nope, doesn’t work…

#4

I’ve “solved” it for now with timer.setInterval(..., 250), which gets started in the page loaded event, and cleared in the page unloaded event.
So it checks the contents of the TextField four times a second (which makes it feel near-instantaneous).

Not ideal, but it works.

If anyone knows of a better way, please let me know :slight_smile:

#5

Yay, found it!!!

Just put:

this.on(Observable.propertyChangeEvent, function(propertyChangeData: PropertyChangeData){
    console.log(propertyChangeData.propertyName 
                + " has been changed and the new value is: " 
                + propertyChangeData.value);
});

in the loaded event handler, and:

this.off(Observable.propertyChangeEvent);

in the unloaded event handler of the Observable that the page is bound to.

:slight_smile: :grinning: :nativescript: ROX!!!

DISCLAIMER: I am a :nativescript:00b

#6

This seems like it would solve the issue that I’m having: trying to bind/capture a propertyChange event on ListView item.

I don’t understand where you put your “this.on(…)” code- I have for my pages I have a page.ts, page.xml and page-view-model.ts

I may be way off base here, though. I think I’m not trying to do anything unique - just capture when any item in a ListView gets changed. That continues to elude me.

Any thoughts?

#7

I made a little project (TypeScript, no Angular) that seems to work well.

Find it here:

Let me know if it works :slight_smile:

#8

I think this is a bug (propertyChange) was working previously and is not mentioned in breaking changes.

I filed an issue

#9

(textChange) seems to work with angular.

#10

Thanks.

I am still a bit puzzled by the whole event system, observables, etc.

I come from a Delphi / Lazarus background, and creating an event handler is ridiculously easy in Delphi / Lazarus. All the event slots are there in Delphi’s and Lazarus’s IDEs: one double click on an event slot will create an empty event handler in your code. It literally takes 0.1 seconds to create an event handler.

I then went on to learn Java in university, and the way to create event handlers in Java is horrific; well, Java itself is pretty horrific… Building UIs: horrific. Type system: horrific. Exceptions: horrific.

I love NativeScript, and I love TypeScript.

But the event system is a bit… unclear, well, to me at least.

I don’t know Angular, I don’t use it (yet), maybe it’s easier with Angular, I couldn’t say.

Anyway. I got this little demo working at least (a few posts up)

Happy coding!

:slight_smile: :nativescript:

#11

Yes.

Typescript is just so nice compared to raw JavaScript.

The nice thing with angular is the two way binding and the fact that component essentially controls itself. No more unseen hand manipulating the DOM (or equivalent model). jQuery was nice idea for its time, but the approach is backwards.

Like anything use as is useful don’t fall for the ideologues.

#12

propertyChange is mentioned in the breaking changes I need to learn to read better.

#13

I was referring to Java, not JavaScript, haha :grinning:

But your statement “Typescript is just so nice compared to raw JavaScript” is certainly true as well. Even JavaScript is a gazillion times nicer than Java.

You talk about two-way binding with Angular, but Observables offer that already… So I still don’t see what Angular could benefit me. Maybe in time.

:slight_smile: :nativescript:

#14

Yeah, that’s what I tested it with (responding to the comment that textChange works with Angular)

#15

Doesn’t seem to work without Angular… :confused:

#16

Doing it in code, withpage.getViewById() and then attaching an on() does work…

No idea why it doesn’t without this :pensive:

#17

@nativescriptrox, could you possibly provide snips of your code where you made this work… I don’t get how to incorporate getViewById() and later attaching to on() into my nativescript (not angular) code. I’d really appreciate seeing how you are doing it “in code”. Do you mean without any xml file?
Thank you for any bit of help!

#18

Yes, I will, but later on. I’m not at home right now, just on my mobile.

I’ll get the simplest possible app working, then share it on BitBucket :slight_smile:

#19

@nativescriptrox , thanks so much! the simplest possible app (with text field change detection) would be a big step up for me. I’ve had endless frustration trying to stitch together demo apps from different versions and styles that don’t play well with others - especially when I discover breaking changes in the fast changing API that don’t seem to be reflected in the documentation.

#20

I agree, it’s confusing, and I get the impression NativeScript needs some work done in this department.

Will definitely post later on today :slight_smile: