4

I have this in template :

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

But im getting this error when i change value in input.

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

Any suggestion?

None
  • 8,817
  • 26
  • 96
  • 171
  • what is `product.itemamount`, what type of values are you adding, also add your pipe what you doing there, you cant expect help without giving anything – Rakesh Chand Sep 07 '17 at 09:03

1 Answers1

2

From Angular docs:

Formats a number as text.

You cannot use DecimalPipe on <input> tag. Like the following:

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

To make the formatting of an input you have to write a custom pipe/directive/method, etc..

UPDATE:

Here is some idea of a custom validation directive:

HTML

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

Directive:

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

Vega
  • 27,856
  • 27
  • 95
  • 103
  • You may find this interesting: https://stackoverflow.com/a/41821711/5468463 – Vega Sep 07 '17 at 09:22
  • i need input so that i can change that value ... i dont want only to display it. – None Sep 07 '17 at 09:32
  • One of the options could be to make a second property as the model of your input and update the property that you want on (change) or something like that. You will still need a custom pipe. – Vega Sep 07 '17 at 09:36
  • https://plnkr.co/edit/8yU6OLvTU5kQloJfc7pG?p=preview u see here does not need custom pipe – None Sep 07 '17 at 09:45
  • The DecimalPipe is NOT intended for the use in tags, it's not that it works partially that you will get it work. You need a custom formatter as above. – Vega Sep 08 '17 at 10:07