用于以 Angular 形式输入反应形式的货币管道

Question

我只学习 Angular 很短时间，但我遇到了一个问题。 我使用反应式表单构建了一个表单。用户可以在输入字段中输入金额。当他离开现场时，我希望该值自动格式化为德语表示法。 （例如 87.998,00）我不需要欧元符号。

到目前为止，我还没有找到通过管道使用反应形式解决这个问题的解决方案。是否值得继续搜索或者我必须使用经典的 Javascript 函数来解决这个问题？

到目前为止我只设法包含两位小数。

validateCurrency(event: any){
let t = event.target.value;
event.target.value = 
  t.indexOf(',')>= 0
  ? t.substr(0, t.indexOf(',')) + t.substr(t.indexOf(','), 2)
  : t;

}

Answer 1

尝试利用这个：

1. https://angular.io/api/common/CurrencyPipe
2. https://angular.io/api/common/DecimalPipe

如果您需要特定的文化：https://angular.io/api/core/LOCALE_ID

代码示例（stackblitz）：

main.ts

import { CurrencyPipe, DecimalPipe } from '@angular/common';
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: './main.html',
  imports: [DecimalPipe, CurrencyPipe],
})
export class App {
  name = 'Angular';

  num1: number = 12.638467846;
  num2: number = 0.5;

  cur1: number = 0.25;
  cur2: number = 10.263782;
}

bootstrapApplication(App);

main.html

<h1>Hello from {{ name }}!</h1>
<h3>Decimal Pipe</h3>
<div>
  <p>{{num1 | number}}</p>
  <p>{{num1 | number:'3.2-5'}}</p>
  <p>{{num2 | number:'3.2-5'}}</p>
  <p>{{num1 * num2 | number:'1.3-6'}}</p>
</div>
<h3>Currency Pipe</h3>
<div>
  <p>{{cur1 | currency:'INR':false}}</p>
  <p>{{cur2 | currency:'INR':false:'1.2-4'}}</p>
  <p>{{cur1 | currency}}</p>
  <p>{{cur2 | currency:'USD':true:'2.2-4'}}</p>
</div>