Hey there,

I'm trying to make a small feature to format the content of a textbox as 
the user types in. The only issue is that patchValue resets the cursor 
position.I'm wondering if this is done by design or it is a side effect of 
the way the value is updated.

Here are my questions :
I was not able to get a hold of the input element from the FormControl 
object to handle the cursor position on my own. Is there a way to access 
the html element from the control?
I might be doing it the wrong way, is there a simpler method to format the 
input values as the user types? A pipe? A directive?

Here's how I do this using angular 2 rc6 :

// The abstract class used to format / parse the values
export abstract class AbstractFormat{
    abstract format(value): string;
    abstract parse(value): string;
    abstract setLang(lang: string): void;

// I subscribe to valueChanges to know when the users has typed a new value.
control.valueChanges.subscribe((newValue) => {
    let rawValue = formatter.parse(newValue)
    control.patchValue(formatter.format(rawValue), { emitEvent: false });

Exemple usage :
Legend :
- [   ] : textbox
- | : cursor

1) Typing a number => Works as expected
[           2| ]
[         20| ]
[       200| ]
[    2 000| ]
[  20 000| ]

2) Correcting a number => Cursor resets
[  20| 000 ]
[    2 000| ] => The cursor goes back to pos 0.

3) Correcting a number => Expected result
[  20| 000 ]
[    2| 000 ]

(I hope these exemple make some sence >.<)

Thanks for you help folks!

You received this message because you are subscribed to the Google Groups 
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Reply via email to