Modifying text inside textChange nativescript
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!
events nativescript angular2-nativescript angular-event-emitter
asked Nov 19 '18 at 19:03
Felipe CentenoFelipe Centeno
497514
add a comment |
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!
events nativescript angular2-nativescript angular-event-emitter
asked Nov 19 '18 at 19:03
Felipe CentenoFelipe Centeno
497514
add a comment |
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!
events nativescript angular2-nativescript angular-event-emitter
asked Nov 19 '18 at 19:03
Felipe CentenoFelipe Centeno
497514
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!
events nativescript angular2-nativescript angular-event-emitter
events nativescript angular2-nativescript angular-event-emitter
asked Nov 19 '18 at 19:03
Felipe CentenoFelipe Centeno
497514
asked Nov 19 '18 at 19:03
Felipe CentenoFelipe Centeno
497514
asked Nov 19 '18 at 19:03
Felipe CentenoFelipe Centeno
497514
asked Nov 19 '18 at 19:03
Felipe CentenoFelipe Centeno
497514
asked Nov 19 '18 at 19:03
Felipe CentenoFelipe Centeno
497514
497514
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
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;
}
}
answered Nov 19 '18 at 19:19
Ian MacDonaldIan MacDonald
9,05111230
add a comment |
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.
answered Nov 19 '18 at 19:35
ManojManoj
6,1532922
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
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53381062%2fmodifying-text-inside-textchange-nativescript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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;
}
}
answered Nov 19 '18 at 19:19
Ian MacDonaldIan MacDonald
9,05111230
add a comment |
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;
}
}
answered Nov 19 '18 at 19:19
Ian MacDonaldIan MacDonald
9,05111230
add a comment |
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;
}
}
answered Nov 19 '18 at 19:19
Ian MacDonaldIan MacDonald
9,05111230
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;
}
}
answered Nov 19 '18 at 19:19
Ian MacDonaldIan MacDonald
9,05111230
answered Nov 19 '18 at 19:19
Ian MacDonaldIan MacDonald
9,05111230
answered Nov 19 '18 at 19:19
Ian MacDonaldIan MacDonald
9,05111230
answered Nov 19 '18 at 19:19
Ian MacDonaldIan MacDonald
9,05111230
9,05111230
add a comment |
add a comment |
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.
answered Nov 19 '18 at 19:35
ManojManoj
6,1532922
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
add a comment |
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.
answered Nov 19 '18 at 19:35
ManojManoj
6,1532922
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
add a comment |
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.
answered Nov 19 '18 at 19:35
ManojManoj
6,1532922
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.
answered Nov 19 '18 at 19:35
ManojManoj
6,1532922
answered Nov 19 '18 at 19:35
ManojManoj
6,1532922
answered Nov 19 '18 at 19:35
ManojManoj
6,1532922
answered Nov 19 '18 at 19:35
ManojManoj
6,1532922
6,1532922
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
add a comment |
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
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
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
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53381062%2fmodifying-text-inside-textchange-nativescript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
