How to have different value between model and input box (Angular 5)

Question

I have an application in Angular 5, and I need to have an input formatted with thousand separators (space), but my model is a number and don't allow spaces (number expected).

My application is already developped and I don't want to change all typescript, I only want to create a directive or pipe.

Example like i want :

Is it possible to have a different model of Input box ?

Version :

Angular5

Steven

Yes in my input field I want separator, but in my model I want a value without separator. — Steven Dieu, Dec 08 '17 at 15:37
Here is the good article about such a kind of thins (different view and model values). https://netbasal.com/angular-formatters-and-parsers-8388e2599a0e — Oleksandr Poshtaruk, Dec 08 '17 at 15:42
Here is [an answer](https://stackoverflow.com/a/39643180/1009922) to a similar question. — ConnorsFan, Dec 08 '17 at 15:45
And [another one](https://stackoverflow.com/a/40346864/1009922). — ConnorsFan, Dec 08 '17 at 15:50
@ConnorsFan [stackblitz](https://stackblitz.com/edit/angular-ldd4wl) This solution is not good, because the model is not a number it's string !!! Thx Alexander, I read this post and I comeback with my result. — Steven Dieu, Dec 08 '17 at 16:02
@StevenDieu - Are you talking about [this answer](https://stackoverflow.com/a/40346864/1009922)? The model is a number. — ConnorsFan, Dec 08 '17 at 16:09
@ConnorsFan [Stackblitz](https://stackblitz.com/edit/angular-ldd4wl) I'm sorry but, look at my stackblitz it does not work. — Steven Dieu, Dec 08 '17 at 16:24
@StevenDieu - Does [this one](https://stackblitz.com/edit/angular-huc5wt?file=app%2Fapp.component.ts) work? — ConnorsFan, Dec 08 '17 at 16:43
@ConnorsFan Yes nice !! But ... (sorry) my application it's already developped and I have more input and I don't want to write the code in my component.ts. I prefer a generic code like directive or simple pipe without method convert... It's possible ? — Steven Dieu, Dec 08 '17 at 16:51
I haven't done it but, according to [this article](https://blog.ngconsultant.io/custom-input-formatting-with-simple-directives-for-angular-2-ec792082976), you can create a pipe with the `transform` and the `parse` methods, so that formatting can be customized in both directions. — ConnorsFan, Dec 08 '17 at 16:58

score 1 · Answer 1 · answered Dec 08 '17 at 22:49

1

you can create an loval variable and bind to your input. then in change event of input box cast variable to your model.

if this is helpfull tell me.

answered Dec 08 '17 at 22:49

hamid_reza hobab

925
9
21

How to have different value between model and input box (Angular 5)

1 Answers1