The specified value cannot be parsed, or is out of range when using number pipe

Question

The specified value cannot be parsed, or is out of range

When I get my object I format a number with a pipe but it returns this warning and the value isn't displayed. If I remove it, it is displayed.

This doesn't displays the value

  <input name="value" [ngModel]="value | number : '1.2-2'"/>

This displays the value

  <input name="value" [ngModel]="value"/>

TS Here I get my object by its id after choosing it in a list.

  ngOnInit(){
    this.get();
  }

get() {
    this.service.get(this.id).subscribe(
      (data) => {
        this.object = data;
        this.name = this.object.name;
        this.value = this.object.value;
      },
      (error) => {
        console.log(error);
      }
    );
  }

The value is a number and I get it in the console without any problem.

Well I've run out of answers. It'd be the bes if you could create an stackblitz with a demonstration of the problem. Even if i put "car" into the number pipe, i get a different error. — kvetis, Dec 10 '20 at 10:23

score 31 · Accepted Answer · answered Mar 15 '21 at 05:03

31

<input [value]="units * 600 + 2500 | number" readonly type="text" name="grandtotal"
class="form-control" id="grandtotal" placeholder="Grand Total">

I found my solution here changing or replacing the type in the HTML type="text"

answered Mar 15 '21 at 05:03

Owen jasper Vargas

426
4
6

I really do not see how this is the solution. What if my backend expects the value to be of type integer? – manneJan89 Oct 24 '22 at 12:20
It's for the viewing of the data you can format it again before sending the data to the backend. :) – Owen jasper Vargas Apr 23 '23 at 14:31

score 4 · Answer 2 · answered Dec 10 '20 at 09:42

Okay, my last take on this. I now understood what your question is. I did not read the title, just looked at your code.

The problem is in your value. In order for the value to be used with number pipe it has to be Number or a string but in a parse-able format. When the value is transformed in the number pipe, it is first parse to Number. If it is not parse-able, then you get the error you get.

You may be using a comma as a decimal separator which is not supported.

"1,34" is incorrect. "1.34" is correct.

If I am to help you further, I'd need to know what is the value of the data.value

data.value displays 0.02 and when I do a console log of the object it is a string. — leri, Dec 10 '20 at 09:55

kvetis · Answer 3 · 2020-12-10T09:07:58.143

2

Just bind to value instead of ngModel. It is not needed.

<input name="value" [value]="value | number : '1.2-2'"/>

Minimalist Stackblitz Demo

edited Dec 10 '20 at 09:07

answered Dec 10 '20 at 09:00

kvetis

6,682
1
28
48

It still doesn't display the value, am I missing something ? – leri Dec 10 '20 at 09:03
Are you using OnPush change detection strategy? – kvetis Dec 10 '20 at 09:06
I use it on init. – leri Dec 10 '20 at 09:07
Hi all - I have a similar issue. Using "autocomplete" on a common ` - user had previously entered `+12025551212`, so that pops up when the field comes in focus, if the user selects that, the `+` causes the same error as in the OP, as well, the length is 12, two over the maxlength of the field. Is there anyway way to capture the autocomplete entry to parse out the '+1' ??? – rolinger Apr 26 '22 at 15:37
Don't use `type=number` for phone numbers. Treat them as a string. Change `name` to avoid autocomplete collision. – kvetis Apr 27 '22 at 12:34

score 0 · Answer 4 · answered Dec 10 '20 at 09:11

The problem is not with ngModel but with the OnPush strategy.

When doing async work, you need to notify the change detector that your data has changed.

constructor(private cd: ChangeDetectorRef) {}

get() {
    this.service.get(this.id).subscribe(
      (data) => {
        this.object = data;
        this.name = this.object.name;
        this.value = this.object.value;
        // notify the cd here
        this.cd.markForCheck();
      },
      (error) => {
        console.log(error);
      }
    );
  }

The same thing happens when I add the code. – leri Dec 10 '20 at 09:14 — leri, Dec 10 '20 at 09:14

Abel Chipepe · Answer 5 · 2021-06-11T10:53:47.493

If you read the documentation, you might as well check the pipe number arguments:

1.2-2 = {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

where:

minIntegerDigits: The minimum number of integer digits before the decimal point. Default is 1.

minFractionDigits: The minimum number of digits after the decimal point. Default is 0.

maxFractionDigits: The maximum number of digits after the decimal point. Default is 3.

score 0 · Answer 6 · answered May 15 '22 at 12:03

0

Just parse the value from html as any and then use parseFloat or parseInt

This works for me:

 let importeLuz = parseFloat(valor.importe as any);

       console.log(typeof(importeLuz)) //number

answered May 15 '22 at 12:03

Javi

111
2

score 0 · Answer 7 · answered Apr 24 '23 at 10:39

0

I had the same issue, I took the input as type="text" and then converted it into float using parseFloat() method in js.

'longitude': parseFloat(e.target.longitude.value), 'latitude':parseFloat(e.target.latitude.value),

answered Apr 24 '23 at 10:39

Anmol Dhage

1

The specified value cannot be parsed, or is out of range when using number pipe

7 Answers7

Linked