在 Angular2 中将逗号分隔的千位添加到数字输入中答案

【问题标题】：Add Comma Separated Thousands to Number Inputs in Angular2在 Angular2 中将逗号分隔的千位添加到数字输入中
【发布时间】：2016-02-09 18:34:19
【问题描述】：

在 Angular 2 中，如何为数字输入控件添加千位分隔符，例如

1000 型中的价值

当光标不在输入控件显示分隔符时（例如 1,000）

在输入控件中编辑值（即控件内的光标）时，应删除逗号以方便编辑值

谢谢

【问题讨论】：

创建管道：angular.io/docs/ts/latest/guide/pipes.html

标签： angular

【解决方案1】：

试试这个解决方案，这将解决您的问题。 注意：在堆栈溢出 sn-p 中不起作用

<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;
}}

【讨论】：

【解决方案2】：

正如马克在上面评论的那样，您想使用管道。您可以使用以下语法创建管道，然后只需使用组件装饰器上的pipes 属性将管道添加到您的组件。

@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;
  ...
}

更新

在这种情况下，我建议在输入上监听焦点和模糊事件

@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
  }
}

【讨论】：

抱歉，我已经更新了问题，以便更清楚地了解我正在寻找的所需行为。谢谢
更新了答案，尽管我仍然觉得您的实际用例不清楚，也许您可以将两者结合起来以获得您正在寻找的内容，或者请发布您的行为的完整详细描述从头到尾寻找。
感谢更新正是我正在寻找的，我只需要将它变成一个可转售的组件以用于所有数字输入。谢谢。
为答案干杯 :)))))
我不相信这会起作用，因为数字的输入类型不允许您输入逗号。

【解决方案3】：

number:0 已经这样做了，您可以使用“1.2-2”代替 0。这会根据文化添加逗号。

【讨论】：

在您的答案中添加更多细节。

【解决方案4】：

我对 Hardik Shimpi 的代码进行了调整，解决方案变得更简单。干得好！

<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, ',')"
/>

【讨论】：

【解决方案5】：

我认为这是一个更清洁的解决方案：

在 app.modules.ts 中导入 LOCALE_ID

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

并像这样在提供者中定义：

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

这将自动控制分隔符

【讨论】：

好的，那可以是特定于语言环境的吗？我尝试了 EN 和 DE，两者都不会在数字输入中添加任何分隔符。 1000 保持 1000 并且不会变为 1,000。（也讨论过here） - 编辑那是 angularJS，但可能与 angular 相同。
我应该从哪里包含 DbProvider？？