CODEWITHSUNDEEP
angularangular-pipe
leri
leri

Reputation: 321

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

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.

Upvotes: 22

Views: 79288

Answers (7)

Anmol Dhage
Anmol Dhage

Reputation: 1

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),

Upvotes: 0

Javi
Javi

Reputation: 135

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

Upvotes: 0

Abel Chipepe
Abel Chipepe

Reputation: 462

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.

Upvotes: 0

Owen jasper Vargas
Owen jasper Vargas

Reputation: 516

<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"

Upvotes: 40

kvetis
kvetis

Reputation: 7331

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

Upvotes: 4

kvetis
kvetis

Reputation: 7331

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);
      }
    );
  }

Upvotes: 0

kvetis
kvetis

Reputation: 7331

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

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

Minimalist Stackblitz Demo

Upvotes: 2

Related Questions