CODEWITHSUNDEEP
angular
Chris Small
Chris Small

Reputation: 363

Add Comma Separated Thousands to Number Inputs in Angular2

In Angular 2 how would I add thousands separator for number input controls, so for example

Value in model 1000

When cursor not in input control display separator (e.g. 1,000)

When editing value (i.e. cursor inside control) in input control, it should remove commas to allow the value to be easily edited

Thanks

Upvotes: 11

Views: 48334

Answers (5)

Cherma Ramalho
Cherma Ramalho

Reputation: 395

I made an adjustment in the code of Hardik Shimpi the solution became simpler. Good work!

<input
  type="text"
  name="product_price"
  [(ngModel)]="product_price"
  autocomplete="off"
  (keydown)="numberCheck($event)"
  oninput="this.value=this.value.replace(/\D/g, '').replace(/\B(?=(\d{3})+ 
  (?!\d))/g, ',')"
/>

Upvotes: 0

Hardik Shimpi
Hardik Shimpi

Reputation: 410

Try this solution, this will solve your problem. Note: Won't work in stack overflow snippet

<input
      type="text"
      name="product_price"
      [(ngModel)]="product_price"
      autocomplete="off"
      (keydown)="numberCheck($event)"
      (keyup)="CommaFormatted($event)"
    />

CommaFormatted(event) {
 // skip for arrow keys
 if(event.which >= 37 && event.which <= 40) return;

 // format number
 if (this.product_price) {
  this.product_price = this.product_price.replace(/\D/g, "")
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 }}

numberCheck (args) {
if (args.key === 'e' || args.key === '+' || args.key === '-') {
  return false;
} else {
  return true;
}}

Upvotes: 8

manish
manish

Reputation: 69

number:0 already doing that you may use '1.2-2' in place of 0. This adds comma as per culture.

Upvotes: 1

kabus
kabus

Reputation: 909

I think that this is a cleaner solution:

Import LOCALE_ID in app.modules.ts

import {ErrorHandler, NgModule, LOCALE_ID} from '@angular/core';

and define in providers like this:

  providers: [
    PouchServiceProvider,
    DbProvider, {
      provide: LOCALE_ID,
      useValue: "nl-NL"
    }
  ]

This will auto control the seperator

Upvotes: -2

SnareChops
SnareChops

Reputation: 13347

As Mark commented above you want to use a pipe. You can create a Pipe using the following syntax, then simply add the pipe to your component using the pipes property on the component decorator.

@Pipe({name: 'commaSeparatedNumber'})
export class CommaSeparatedNumberPipe implements PipeTransform {
  transform(value:number, args:string[]) : any {
    return // Convert number to comma separated number string
  }
}

@Component({
  ...
  template: `
    <div *ngIf="!editing">{{number | commaSeparatedNumber}}</div>
    <input type="number" [(ngModel)]="number" />
  `,
  pipes: [CommaSeparatedNumberPipe]
})
class MyComponent{
  public editing: boolean;
  public number: number;
  ...
}

UPDATE

In that case I would recommend listening to the focus and blur events on the input

@Component({
  ...
  template: `<input type="text" [(ngModel)]="number" 
              (focus)="removeCommas()" (blur)="addCommas()" />`
})
class MyComponent{
  number: string;

  removeCommas(){
    this.number = this.number.replace(',', '');
  }

  addCommas(){
    this.number = // Convert number to comma separated number string
  }
}

Upvotes: 8

Related Questions