How to keep format in view but not in model? (Angular 5)

Question

I'm making a custom component with support for the [(ngModel)] directive, and it works just fine. The problem is that I want to keep a currency format on the view and keep a "normal" number in the model, is this possible for 2-way databinding in Angular 5?

here's the code: https://stackblitz.com/edit/angular-c1qxh4

You will notice some things:

when loading, everything seems fine, only the view has the format
when you add let's say 2 more zeros, then the format goes to the model as well (this is what I want to avoid)
the format in the model is wrong (the commas are not correctly placed, but this is not important, I don't want the format there anyway)

Then, my question would be, is it possible to do that I want to do? If so, what am I doing wrong?

EDIT: For clarification, I don't want to do this on 2 separated components (e.g an input and a label, or an input and an invisible input on top of it (I tried that already)), I want to know if theres a way to do this on a single input.

Jihoon Kwon · Answer 1 · 2018-04-19T00:27:53.007

I am not sure that I understood what you need exactly, but my case I usually use currency input or view function like below :

component.ts

public price;

  addCommas(number) {

    let nStr;

    if(typeof number == 'string'){
      nStr = number;
    }else if(typeof number == 'number'){
      nStr = number.toString();
    }else{
      // console.error("ERROR addCommas() : ", number);
      return;
    }
    nStr += '';
    let x = nStr.split('.');
    let x1 = x[0];
    let x2 = x.length > 1 ? '.' + x[1] : '';
    let rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
  }

component.html

<div>
  <app-money-input [(ngModel)]="price"></app-money-input>
  ${{addCommas(price)}}   //price is not changed. but transformed when it is rendered.
</div>

Then, you do not need to change price variable. only view template change the format using addCommas function when it is rendered.

I hope it would be helpful for you :)

I added input NgModel convert format functions.

define ngModel using priceString variable.
define convert function which save original value to price variable. and transform $ and comma format and save it to pricsString variable.
keyup event binding for the input
use price (original value without format ) as a output

*.ts :

convertPrice(event:any){
    this.price = this.priceString.replace(/,/gi, "");
    this.priceString = this.price.split(/(?=(?:\d{3})+$)/).join(",");
    console.log(this.priceString);
  }

*.html

<input type="text" class="form-control input-sm" id="Price"
       required
       (keyup)="convertPrice($event)"
       [(ngModel)]="priceString"
       placeholder="please enter price">

He does not want that .He wants the model to stay the same like 15 000 which is a number, while at the same time input shows $15000, which is a string. What he needs is some kind of a wrapper arround ngModel value inside the money-input component. — Developer Thing, Apr 18 '18 at 23:55
@SemirDeljić Yes, that is the code. price variable can have 15000 ( string or number ). and the price can be used as a child component input without any value changes as well. — Jihoon Kwon, Apr 19 '18 at 00:01
@JihoonKwon I want to do what you're doing, but everything inside the input, not in a separated label (see the link to my code and you'll understand) — , Apr 19 '18 at 00:07
@Gustavo I added another option for ngModel transform function :) — Jihoon Kwon, Apr 19 '18 at 00:28
@JihoonKwon thanks for that, but I don't think you fully understand what I want (did you see my code?), I want just one variable as the ngModel (the same variable should be currency in the view and "number" in the model) — , Apr 19 '18 at 00:47

How to keep format in view but not in model? (Angular 5)

1 Answers1