0

I'm currently using a HostListener to be able to format user text at the same time that the user is typing it. For example if the user is typing a phone number I want to be able to add format just as needed. If the string is 0000 I want the text to be 000-0, if text is 0000000000 then "(801) 123 - 1234". I got the logic to do this, but I'm currently using a hostlistener to do this.

  @HostListener("textChange")
  public onTextChange(target): void {
    this.el.text = this.phoneFormatPipe.transform(this.el.text)
  }

This works, but it keeps calling itself until the max stack call limit is reached. This is obviously too slow, so my question is: how do I modify the text inside my element without tiggering the textChange event? or is there another way to accomplish this?

Thanks in advance! Happy coding!

Felipe Centeno
  • 2,911
  • 1
  • 21
  • 39

2 Answers2

2

There is a better way to do what you're doing, but I'm not sure if there's an even better way. Coming from iOS development, I know there is definitely a more appropriate place to do this sort of manipulation, but doing it here shouldn't be causing you to reach the max stack.

If you update your source to do this instead, you will avoid the maximum stack limit (and significantly increase performance of your app). It is not the best way, but it is the best way that I have found available in NativeScript at this time.

@HostListener("textChange")
public onTextChange(target): void {
  let newText: string = this.phoneFormatPipe.transform(this.el.text);
  if (this.el.text !== newText) {
    this.el.text = newText;
  }
}
Ian MacDonald
  • 13,472
  • 2
  • 30
  • 51
0

It's going to be recursive until you make sure it's not the same string with an if condition, like in @Ian's example.

Also I would suggest checking out the nativescript-masked-text-field rather formatting text manually on every change.

Manoj
  • 21,753
  • 3
  • 20
  • 41
  • I tried this before, but the mask it's static. For example "(000)-000-0000" which I cannot then modified to accept more than 10 digits, or at least I don't know how. When I modified the mask programmatically it seemed to mess up with the implementation throwing some random strings. – Felipe Centeno Nov 19 '18 at 19:42