CODEWITHSUNDEEP
htmlangular
Viru
Viru

Reputation: 2246

format number in input box with two decimal place

I have below input control in my html

 <input id="inputcntrl" type="text" value="{{(mynumber) | number:'2.2-2'}}" [(ngModel)]="mynumber" (blur)="validatemynumber()" />

As you can see I am formatting input text to make sure it has two decimal values. It does work correctly when user enters the value in input box. onBlur event I am checking the value entered by user and if it is not within the range (min >mynumber>max) then I am setting mynumber with min value. Problem is mynumber displays min value with no formatting. forex: If min valule is 10 then input box should display 10.00 but it displays only 10..any idea how can I fix this? I am using angular2

Update: I think problem in my case is with somehow related to binding..When I update mynumber from my component and the new value is reflected in UI but its formatting is lost. mynumber variable is of type number. I need to find a way to update value with formatting from component

Upvotes: 1

Views: 2708

Answers (2)

Pengyy
Pengyy

Reputation: 38189

If you want to format mynumber at your component with an angular way, try using built-in DecimalPipe at your component(the same as number pipe used at your template).

import { DecimalPipe } from '@angular/common'

this.mynumber = this.decimal.transform(this.mynumber, '2.2-2');

Plunker demo

Upvotes: 0

Gerard Banasig
Gerard Banasig

Reputation: 1713

Try mynumber.toFixed(2)

<input id="inputcntrl" type="text" value="{{mynumber.toFixed(2)}}" [(ngModel)]="mynumber" (blur)="validatemynumber()" />

Here is a reference documentation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed

Upvotes: 1

Related Questions