Allow only one decimal on input in Angular2

Question

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?

Answer 1

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.com/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

Answer 2

try this

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

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

Answer 3

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