Question

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

模型1000中的值

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

时

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

由于

Answer 1

正如马克上面评论的那样，你想要使用烟斗。您可以使用以下语法创建管道，然后使用组件装饰器上的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
  }
}

Answer 2

数字：0已经在做你可以使用的＆＃39; 1.2-2＆＃39;代替0.这会根据文化添加逗号。

Answer 3

尝试此解决方案，这将解决您的问题。 注意：不适用于堆栈溢出摘要

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

Answer 4

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

在app.modules.ts中导入LOCALE_ID

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

并在以下提供商中定义：

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

这将自动控制分隔符

在Angular2

4 个答案: