Bad Usability "ui-percentage-mask="2" + ui-negative-number"

[ivanguimam]

Using the two directives together, when I focus on input and type the "-" sign before typing any number, it does not let me type any number. For both directives to work together, I need to enter the number first and only then put the minus sign, this to the user is horrible.

<input ng-model="$ctrl.coupon.value" required type="tel" class="form-control custom-input"
max="1" id="value" ui-percentage-mask="2" ui-negative-number ng-disabled="$ctrl.isUpdate">

[ivanguimam]

Edit the parse function in the src/global/percentage/percentage.js file

...
var actualNumber = parseFloat(modelMask.apply(valueToFormat));

if (isNaN(actualNumber)) { // ADD THIS CONDITION TO FIX THE PROBLEM
    actualNumber = parseFloat(modelMask.apply(value.replace(/[^0-9]/g,'')))
    valueToFormat = PreFormatters.clearDelimitersAndLeadingZeros(value) || '0'
    formatedValue = viewMask.apply(valueToFormat) + percentageSymbol;
}

if (angular.isDefined(attrs.uiNegativeNumber)) {
...

[lucasjorge944]

I created this fix directive, to apply with percentage directive and solved the problem for me.

angular.module("nucont").directive("fixInputMask", function () {
    return {
        restrict: "A",
        require: "ngModel",
        link: function (scope, element, attrs, ctrl) {
            element.on("keyup", function (ev) {
                scope.$apply(function () {
                    if (isNaN(ctrl.$modelValue)) {
                        const value = `-0,${Number(ev.key)}0`;

                        ctrl.$setViewValue(value);
                        ctrl.$render();
                    }
                });
            });
        }
    };
});