This is my input:

<input [(ngModel)]="minimumRange" min="1" placeholder="0.0" step="0.1" type="number">

What I need is, when someone enters

"1"

, I need it to return

"1.0".

on blur How is this possible?

This is my input:

<input [(ngModel)]="minimumRange" min="1" placeholder="0.0" step="0.1" type="number">

What I need is, when someone enters

"1"

, I need it to return

"1.0".

on blur How is this possible?

• javascript
• jquery
• html
• angular

• 1 Use @Pipe. For example: stackoverflow./questions/38456114/… – SrAxi Commented Apr 5, 2017 at 7:57
• @SrAxi, please post an example, thanks,. – eric.dummy Commented Apr 5, 2017 at 8:01
• is the type of minimumRange a string or a number ? – n00dl3 Commented Apr 5, 2017 at 8:16
• the type of minimumRange is : number – eric.dummy Commented Apr 5, 2017 at 8:17
• 1 you need to output 1.0 because of style or because of some processing on the server or elsewhere that requires a number with 1 decimal ? Because the number representation of "1.0" is 1... – n00dl3 Commented Apr 5, 2017 at 8:29

3 Answers 3

Using the number @Pipe you should be able to achieve this.

<input [ngModel]="minimumRange | number : '1.1-2'" min="1" (ngModelChange)="minimumRange=$event" placeholder="0.0" step="0.1" type="number">

For more info:

• What are the parameters for the number Pipe - Angular 2
• http://www.concretepage./angular-2/angular-2-decimal-pipe-percent-pipe-and-currency-pipe-example

Hope it helped! Good coding bro!

Update:

If we use @Pipe in model like this:

<input [(ngModel)]="myModel| uppercase">

It will throw the following error:

Parser Error: Cannot have a pipe in an action expression at column X

We will just need to change it to this:

<input [ngModel]="myModel| uppercase" (ngModelChange)="myModel=$event">

Update2:

Added (ngModelChange)="minimumRange=$event" to keep the two way binding functionality.

As @n00dle pointed me, removing the () removes the 2 way binding functionality. So the way to use @Pipe in a 2-way-binding would be using also (ngModelChange).

This could be of huge use:

• Using Pipes within ngModel on INPUT Elements in Angular2-View

try this

<input [(ngModel)]="minimumRange" min="1" placeholder="0.0" step="0.1" type="number" (keyup)='conversion()'>

conversion(){
  this.minimumRange = this.minimumRangex.toPrecision(2);
}

  private _minimumRange:number;

  get minimumRange():number{
    return this._minimumRange;
  }

  set minimumRange(num:number){
    this._minimumRange = num.toPrecision(2);
  }

      <input [(ngModel)]="minimumRange" min="1" placeholder="0.0" step="0.1" type="number">