Question

我在模板中有这个：

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

但是当我改变输入值时我得到这个错误。

InvalidPipeArgument：＆＃39; 333,00＆＃39; for pipe＆＃39; DecimalPipe＆＃39;

有什么建议吗？

Answer 1

来自Angular docs：

将数字格式化为文本。

您无法在<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

InvalidPipeArgument：＆＃39; 333,00＆＃39; for pipe＆＃39; DecimalPipe＆＃39;？

1 个答案: