angular - 无效管道参数 : '333,00' for pipe 'DecimalPipe' ?

Question

我在模板中有这个:

 <input class="ui-g-4 right"  [ngModel]="product.itemamount | number:'1.2-2'" (ngModelChange)="product.itemamount = $event">

但是当我更改输入值时出现此错误。

InvalidPipeArgument: '333,00' for pipe 'DecimalPipe'

有什么建议吗？

Answer 1

来自 Angular docs :

Formats a number as text.

您不能在 <input> 上使用 DecimalPipe标签。像下面这样:

<p>  {{product.itemamount | number: '1.2-2'}} ></p>

要格式化输入，您必须编写自定义管道/指令/方法等。

更新:

这是自定义验证指令的一些想法:

HTML

  <input decimal [(ngModel)]="value" name="value" >

指令 :

HostListener('input', ['$event'])
  onInput($event){
  let formattedValue: string;
  let arrayValue = this.el.nativeElement.value.split('.');

  let patternValidation = arrayValue[0].match(/[0-9]{3}/);

  if (patternValidation !== null && arrayValue[0].length > 3) {
    let thousands = Array.from(Array.from(arrayValue[0]).reverse().join('').match(/[0-9]{3}/).join()).reverse().join('');
    let replacement = arrayValue[0].replace(thousands.replace(/\D/g, ''), '');
    formattedValue = (replacement.length > 0 ? replacement + "," : "") + thousands;
  } else {
    formattedValue = arrayValue[0];
  }

  if (arrayValue.length > 1) {
    formattedValue = formattedValue + "." + arrayValue[1].substring(0, 2);
  }

}

Stackblitz demo