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