How to limit angular numeric input to N decimal places?

Question

Input should not accept a number with more than N decimal places. N is defined as Input.

For example, if N=3 and the user want to enter 123.3456. He should only be allowed to enter 123.345.

I would like to ahieve something like this:

<input type="number" [(ngModel)]="value" nDecimalsInput [decimals]="2">

Via directive or whatever else...

https://stackoverflow.com/questions/54460923/angular-2-restrict-input-field/54462816#54462816 — Eliseo, Nov 07 '19 at 08:06

score 0 · Answer 1 · answered Nov 06 '19 at 16:11

0

Input mask will do. You may try a lib from npm or create the directive yourself.

In you case the lib is used like this:

<input type="number" [(ngModel)]="value" mask="0*.00">

answered Nov 06 '19 at 16:11

Anton Rusak

score 0 · Answer 2 · answered Nov 06 '19 at 16:16

0

You can do a simple function on (keydown)="maxLength()"

maxLength() {
if (N && this.myFormControl.value.toString().split('.')[1].length === N) {
      return false;
    }
}

answered Nov 06 '19 at 16:16

Ivan Mihaylov

Thanks, but this.myFormControl.value is not updated at the keydown moment. It still didn't change value (keydown is triggered before value change) – Djordje Miladinovic Nov 07 '19 at 08:53
@DjordjeMiladinovic, yes and this is the expected and desired behavior. You want to be checking if you have reached the limit of numbers before inputting a new one. So if your N = 3 and your number is 1.222 after entering the next digit the maxLength function will check the number meaning 1.222 and see that the limit is reached and not add another one by returning 'false'. – Ivan Mihaylov Nov 08 '19 at 11:22

score 0 · Answer 3 · answered Nov 06 '19 at 16:35

So you could do like this to override or hook to an event (like change or key up):

parseFloat($(this).val()).toFixed(3)

<input type="text" name="field" ng-model="number" ui-number-mask="3">

3 Answers3