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: http://stackoverflow.com/questions/38456114/angular-2-pipe-limit-to-2-decimal-places — SrAxi, Apr 05 '17 at 07: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, Apr 05 '17 at 08:29

score 7 · Accepted Answer · edited May 23 '17 at 12:02

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 '17 at 12:02

Community

1
1

answered Apr 05 '17 at 08:24

SrAxi

19,787
11
46
65

I'm receiving template errors when I apply pipe mate.. that's why I asked. – eric.dummy Apr 05 '17 at 08:28
1

pipes are not allowed in 2-way data-binding. – n00dl3 Apr 05 '17 at 08:30
may i know where it is mentioned please `pipes are not allowed in 2-way data-binding`? @n00dl3 – Pardeep Jain Apr 05 '17 at 08:44
@n00dl3 Are allowed. Not allowed in `action expression`, but if we just change `[(ngModel)]` to `[ngModel]` it lets us apply the `@Pipe`. – SrAxi Apr 05 '17 at 08:48
2-way data binding is a combination of a binding and an action expression... So it is not allowed in 2-way data-binding, Period. @SrAxi If you knew it, why do you write it ? – n00dl3 Apr 05 '17 at 08:50
@n00dl3 You can make it work as it shown here: http://stackoverflow.com/questions/39642882/using-pipes-within-ngmodel-on-input-elements-in-angular2-view – SrAxi Apr 05 '17 at 08:53
@n00dl3 I always preffer to use built in methods, if Angular offers us a built in `@Pipe` why not use it? I preffer to change slightly my 2-way-binding behaviour rather than having to 'manually' convert the value in each component where I want this to happen. But, I am just learning, if you have a better way to do this please post an answer and tag me, so I can learn it and use it on my project. Thanks for the chat! :D – SrAxi Apr 05 '17 at 08:57
I never said you should not use it, I just pointed out that your code was wrong. When I said "two-way data-binding" I meant "banana in a box". But nevermind you changed, that's fine. – n00dl3 Apr 05 '17 at 08:58
1

@n00dl3 You did well pointing it out. My first answer wasn't correct nor precise, thanks! :) – SrAxi Apr 05 '17 at 09:05
Thanks guys, how can I change this on blur, not on any event, like above? – eric.dummy Apr 05 '17 at 10:43
@eric.dummy No problem mate! ;) I honestly don't understand your question but the OP (original post) has been answered I believe. You could choose the correct answer for the current question and make a new one with detailed information about this new question that you have, and we will be all glad to give you a hand. Is just to have a question/answer for each issue and avoid extending a question until it loses its original intention. Looking forward to hearing from you! ;) – SrAxi Apr 05 '17 at 10:48
Oh, it's not extending, I'm only asking how to make the (ngModelChange) act on blur not on $event :) That was meant in original question... – eric.dummy Apr 05 '17 at 10:49
@eric.dummy Oh! Ok! Now I understand! I think `(blur)` should make the deal here. Check this question: http://stackoverflow.com/questions/33966050/how-to-make-form-model-update-on-blur-in-angular-2 – SrAxi Apr 05 '17 at 10:59
Will there still be 2 way binding this way? – eric.dummy Apr 05 '17 at 11:00
@eric.dummy Yes! Maybe this example es more clear: http://stackoverflow.com/questions/34918198/how-to-use-onblur-event-on-angular2 . With that you should be good to go! :P – SrAxi Apr 05 '17 at 11:05
**Note**: this does not behave exactly the same as regular pipe (display). Observed on angular 9. -- Regular: `{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}` vs Used with input: `{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits|maxIntegerDigits}` – ddsultan Dec 19 '20 at 22:17

score 2 · Answer 2 · answered Apr 05 '17 at 07:56

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 05 '17 at 07:56

Pardeep Jain

84,110
37
165
215

@n00dl3, please see the pipe comment. Thanks. – eric.dummy Apr 05 '17 at 08:08
the issue with this is that I need to know how to put this in component. I can't place a script in HTML.. – eric.dummy Apr 05 '17 at 08:20
@Padeep Jain, Where does `this.minimumRangex` come from? Thanks – ddsultan Dec 19 '20 at 22:23
I believe it should be typo, there should be `this.minimumRange` – Pardeep Jain Dec 21 '20 at 07:43

score 0 · Answer 3 · answered Apr 05 '17 at 08:36

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

Allow only one decimal on input in Angular2

3 Answers3