How do I limit decimal places to only two numbers when paste number into input box using angularjs?

Question

I have input box accepting decimal numbers with having decimal points limit upto 2 places. Also I am not allowing input to enter more than two decimal places.

eg. 9999.99

But now the problem is when I am copy some number i.e. 999999.9999 and paste it into input box I want result i.e. 999999.99

Meaning I want to truncate rest of the decimal places and don't want rounding as well.

How can I achieve this using angularjs?

Answer 1

You can use ngPattern directive.

<input type="text" ng-pattern="/^[0-9]+(?:\.[0-9][0-9])?$/">

This regex would enforce exactly two places (no more or less). Just change the regex to get whichever desired behavior you want.

Answer 2

You can accomplish this using ng-model along with $formatters and $parsers.

See more explanation here:

ngModel Formatters and Parsers

This is a TypeScript adaptation from some code I use to force currency formats.

app.directive('myModelFormat', ['$filter', function myModelFormatDirective($filter:ng.IFilterService):ng.IDirective {

    return {
        require: '?ngModel',
        link: myModelFormatLink
    };

    function myModelFormatLink(scope:ng.IScope, elem:ng.IAugmentedJQuery, attrs:ng.IAttributes, ctrl:ng.INgModelController) {

        if (!ctrl) {
            return;
        }

        const decimalWithOneDigit:RegExp = new RegExp('\\' + STRINGS.decimalSym + '\\d$');

        ctrl.$formatters.unshift(function myModelFormatFormatter(ignore:any):string {
            return $filter(attrs['myModelFormat'])(ctrl.$modelValue)
        });

        ctrl.$parsers.unshift(function myModelFormatParser(viewValue:string):any {
            const plainNumber:number = parseFloat(viewValue);
            let formatted:string = $filter(attrs['myModelFormat'])(plainNumber);

            // special case where they typed the decimal symbol but not a decimal value,
            // make sure we don't remove the symbol which prevents them from typing a decimal
            if (_s.endsWith(viewValue, STRINGS.decimalSym)) {
                formatted += STRINGS.decimalSym;
            }

            // alternate special case, they typed one decimal number, don't force it to zero, at least not yet..
            if (decimalWithOneDigit.test(viewValue)) {
                formatted = formatted.substr(0, formatted.length - 1);
            }

            elem.val(formatted);
            return plainNumber;
        });
    }
}]);