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?

Use @Pipe. For example: stackoverflow.com/questions/38456114/… — SrAxi
– SrAxi, Commented Apr 5, 2017 at 7:57
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
– n00dl3, Commented Apr 5, 2017 at 8:29

Community · Accepted Answer · 2017-05-23 12:02:24Z

7

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:

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

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Apr 5, 2017 at 8:24

SrAxi

20.1k11 gold badges50 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

16 Comments

eric.dummy Over a year ago

I'm receiving template errors when I apply pipe mate.. that's why I asked.

n00dl3 Over a year ago

pipes are not allowed in 2-way data-binding.

Pardeep Jain Over a year ago

may i know where it is mentioned please pipes are not allowed in 2-way data-binding? @n00dl3

SrAxi Over a year ago

@n00dl3 Are allowed. Not allowed in action expression, but if we just change [(ngModel)] to [ngModel] it lets us apply the @Pipe.

SrAxi Over a year ago

@n00dl3 You did well pointing it out. My first answer wasn't correct nor precise, thanks! :)

|

Pardeep Jain · Accepted Answer · 2017-04-05 07:56:38Z

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

answered Apr 5, 2017 at 7:56

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

4 Comments

eric.dummy Over a year ago

@n00dl3, please see the pipe comment. Thanks.

eric.dummy Over a year ago

the issue with this is that I need to know how to put this in component. I can't place a script in HTML..

ddsultan Over a year ago

@Padeep Jain, Where does this.minimumRangex come from? Thanks

Pardeep Jain Over a year ago

I believe it should be typo, there should be this.minimumRange

aalielfeky · Accepted Answer · 2017-04-05 08:36:15Z

0

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

answered Apr 5, 2017 at 8:36

aalielfeky

3401 silver badge4 bronze badges

Collectives™ on Stack Overflow

Allow only one decimal on input in Angular2

3 Answers 3

16 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

16 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related