Limiting input number type to 2 decimals

1

Hi, I have an Ember number type, I am trying to limit its decimal values to be only 2 digits.

${{input type=“number” id=p.ViolationTypeId value=p.PenaltyAssessed maxlength=“5” scale=“0.01” pattern=“^\d+(.\d{0,2})?$” key-down=(action ‘allowOnly2Decimals’) focusOut=(action ‘saveTotalPenalty’ p model.id p.PenaltyAssessed)}}

        allowOnly2Decimals: function (e1, event) {
            var boxId = '#' + event.path[0].id;

            var t = e1.toString().split('.');

            if (t[1] != null) {
                if (t[1].length == 2) {
                    this.limitDecimal = e1;
                    $(boxId).val(this.limitDecimal);
                    //$(boxId).readyOnly = true;
                }

                if (t[1].length >= 2) {
                    $(boxId).val(this.limitDecimal);
                }
            }
        }
    }

I am trying to limit my Textbox to allow only 2 digits after decimal but now its allowing 3 numbers after decimal, how can I make this input type number to allow only 2 decimals, if there is any setting, I tried with scale property and format properties nothing worked.

And is there any way that I can do it without using jQuery Id selector explicitly that I am setting “$(boxId).val(this.limitDecimal);”

Any help please?

2

Hi @abdul, I’d consider using a native input instead of ember’s {{input}} component for this. With a native input you can use one way data binding so it’s easier to have an input lifecycle like this:

keypress => action => validation => change value

whereas with two way binding it’s more like this:

keypress => change value
         => action => validation

so your action and the value mutation will be fighting each other. Those diagrams are probably nonsense but hopefully it helps illustrate the problem a little bit.

Anyway using a native input can be done a couple ways depending on what version of Ember you’re using. If you’re on “classic” ember (ember < 3.15) you could use it like this:

<input value={{p.PenaltyAssessed}} oninput={{action "onlyAllow2Decimals" value="target.value"}}>

If you are using Octane (ember > 3.15 and octane enabled) you could use it like:

<input value={{p.PenaltyAssessed}} {{on "input" this.onlyAllow2Decimals}}>

but you’d want to move the action handler out of the “actions” hash. You can also bind to other actions like key-down or whatever, it doesn’t have to be “input”.

And in the action handler instead of using jquery or doing any dom manipulation whatsoever you can just do whatever validation/string manipulation you want on the input, then do set the property directly on p whatever that is.

3

I second this, but I would also add that you don’t even have to be on 3.15 to get these benefits: modifiers ship with Ember back to 3.11, but there are polyfills you can use to go even further back than that! I strongly recommend adopting the approach if you are on any version supported by the polyfills (which is back to 2.13)!

4

<input value={{p.PenaltyAssessed}} type=“number” step=“0.01” scale=“0.01” pattern=“^\d+(.\d{0,2})?$” oninput={{action “allowOnly2Decimals1” value=“target.value”}}>

JS function:

        allowOnly2Decimals1: function (e1, event) {
            var boxId = '#' + event.path[0].id;

            var t = e1.toString().split('.');

            if (t[1] != null) {
                if (t[1].length == 2) {
                    this.limitDecimal = e1;
                }

                if (t[1].length >= 2) {
                    e1 = this.limitDecimal;

                    return false;
                }
            }
        }
    }

I tried in the following way but the Textbox is allowing more than 2, even 3 decimals with this function, any help please