Input text element with different display text and value in Angular 2

Question

I have a use case in which there is a input text element in which if a person enters 2345 it should be displayed as 2,345 but in back end it should store the number as 2345. How could we achieve this in Angular 2?

You can use `toLocaleString()` - [docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString) — Ben Kolya Mansley, Jan 18 '18 at 11:25
just do such as the value corresponds to what's displayed (if input text is `2,345`, value would be the same), but filter the `,` and eventuelly convert to number when you actually use it, much simpler — Kaddath, Jan 18 '18 at 11:25
I also used toLocaleString() to add commas to the number but the issue was when I was trying to get the value of input element it is giving the value with commas. And a lot of code has been written so it will require a lot of changes to remove the commas from all occurrences. So I thought if there is a way we could display the number with commas only on UI without changing much. I also tried custom directives but same issue. — Mayank Gupta, Jan 18 '18 at 11:53

score 2 · Answer 1 · answered Jan 18 '18 at 11:28

2

Using angular inbuilt filter pipe for numbers will do it https://docs.angularjs.org/api/ng/filter/number

{{1234 | number}}

Output

1,234

answered Jan 18 '18 at 11:28

Ayo K

1,719
2
22
34

OP is asking for Angular 2 so you should describe the usage of pipes as described [here](https://angular.io/api/common/DecimalPipe) – domyos Jan 18 '18 at 11:33
I think we can't use pipes on input elements – Mayank Gupta Jan 18 '18 at 11:59

score 0 · Answer 2 · answered Jan 18 '18 at 12:42

You can make a directive, that use @HotListener blur and focus

@Directive({ selector: "[app-number]" })
export class NumberFormat implements OnInit {

  private el: HTMLInputElement;
  constructor(private elementRef: ElementRef) {
    this.el = this.elementRef.nativeElement;
  }

  ngOnInit() {
    this.el.value = this.transform(this.el.value);
  }

  @HostListener("focus", ["$event.target.value"])
  onFocus(value) {
    this.el.value = this.parse(value); // opossite of transform
  }

  @HostListener("blur", ["$event.target.value"])
  onBlur(value) {
    this.el.value = this.transform(value);
  }

  //value --> value formatted
  transform(value:any) 
  {
     ...return your value formated...
  }
  //value formated--> value 
  parse(valueFormated:any){
      ..return the real value....
  }

I also made one custom directive which was formatting the input on key down event and formatting the input as the user types but the problem began when I tried to get the value of the input after user tabs out. Fetched value contains commas which is causing other functionality to break as they are expecting only a number. — Mayank Gupta, Jan 23 '18 at 06:14

score -1 · Answer 3 · edited Jan 22 '18 at 14:15

Hope this would be useful:

Index.html:

<body ng-app="numberFilterExample">
  <script>
  angular.module('numberFilterExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.val = 1234.56789;
    }]);
</script>
<div ng-controller="ExampleController">
  <label>Enter number: <input ng-model='val'></label><br>
  Default formatting: <span id='number-default'>{{val | number}}</span><br>
  No fractions: <span>{{val | number:0}}</span><br>
  Negative number: <span>{{-val | number:4}}</span>
</div>
</body>
</html>

Protractor.js

 it('should format numbers', function() {
   expect(element(by.id('number-default')).getText()).toBe('1,234.568');
   expect(element(by.binding('val | number:0')).getText()).toBe('1,235');
   expect(element(by.binding('-val | number:4')).getText()).toBe('-1,234.5679');
 });

 it('should update', function() {
   element(by.model('val')).clear();
   element(by.model('val')).sendKeys('3374.333');
   expect(element(by.id('number-default')).getText()).toBe('3,374.333');
   expect(element(by.binding('val | number:0')).getText()).toBe('3,374');
   expect(element(by.binding('-val | number:4')).getText()).toBe('-3,374.3330');
});

Please provide some explanation with your answer - otherwise this should be a comment — Ben Kolya Mansley, Jan 18 '18 at 11:38

Input text element with different display text and value in Angular 2

3 Answers3