Angular JS Directive Form input validation of min and max

Issue

Hi I have some trouble with a validation of a input in my form of min and max where I have the following.

My form input:

        <div class="input short" ng-if="input.tipo_simulacao.key == 2">
            <input

                name="valor_simulacao_t"
                ng-model="input.valor_simulacao_t"

                type="text"

                required
                ng-minlength="1"

                min="0"
                max="99.99"
                ng-currency currency-symbol="%"

                placeholder="Valor Simulação">
            </input>

            <span class="input-clear"
                ng-model="input.valor_simulacao_t"
                ng-click="input.valor_simulacao_t = null"
                ng-show="form.valor_simulacao_t.$viewValue && input.valor_simulacao_t !== ''"
            >&times;</span>
        </div>

And here is JS directive for the validation:

vm.$watch('input.valor_simulacao_t', function (newValue, oldValue) {
    if (vm.input.valor_simulacao_t && vm.form.valor_simulacao_t && $rootScope.user.taxa_inferior_protocolo < 1) {

        console.log(vm.taxa_base);
        console.log(newValue);

        if (newValue > vm.taxa_base) {
            vm.form.valor_simulacao_t.$setValidity('max', false);
        } else if (newValue < vm.taxa_base) {
            vm.form.valor_simulacao_t.$setValidity('min', false);
        }
    };
});

Now in the input i have setup a min and max attribute with the decimal point where this is a field of percentage.
In the directive there is a validation of where the user details is able to have a lower value than the vm.taxa_base variable then proceeds and checks out if the input value is higher than the vm.taxa_base value, if so than sets the max attribute as invalid where as I if it is less than vm.taxa_base value sets the min attribute as invalid.

The issue that I am having is that if i put values with the comma separator of the % like 9,60 which ads the % afterward it says correctly invalid being the vm.taxa_base = 2.5 but if I insert a value of like 15 with no comma or 15,00 its sets as valid value which it shouldn’t suppose to since in the directive I am comparing the value of each of less or greater.

Thanks in advance as I am stuck here.

---

Ok after messing around with it i found out that has something to with the ng-currency module, as I take that out of the input the min and max validator works fine but not with the ng-currency formatting to % which as comma separator as the value are dot separated.

Here is the watcher fo validate the input:

vm.$watch('input.valor_simulacao_t', function (newValue, oldValue) {
    if (vm.input.valor_simulacao_t && vm.form.valor_simulacao_t && $rootScope.user.taxa_inferior_protocolo < 1) {
        if (newValue > vm.taxa_base) {
            console.log('Error Greater 2');
            vm.form.valor_simulacao_t.$setValidity('max', false);
        } else if (newValue < vm.taxa_base) {
            console.log('Error Lesser 2');
            vm.form.valor_simulacao_t.$setValidity('min', false);
        } else {
            console.log('Pass 2');
            vm.form.valor_simulacao_t.$setValidity('max', true);
            vm.form.valor_simulacao_t.$setValidity('min', true);
        }
    };
});

And now the input (directive):

            <input

                name="valor_simulacao_t"
                ng-model="input.valor_simulacao_t"

                type="text"

                required
                ng-minlength="1"

                min="0"
                max="99.99"

                placeholder="Valor Simulação">
            </input>

Is there a way to format the number in a certain way to respect the percentage format?

Solution

Ok got one of the solutions that works now fine for the validation.
Here is the directive:

.directive('formatPercentage', function() {

    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, elem, attr, ngModel) {

            if (!ngModel) return;

            elem.on('focusout', function() {
                var str = elem.val();
                elem.val(str + ' %');
            });

            elem.on('focus', function() {
                var str = elem.val();
                elem.val(str.substring(0, str.length - 2));
            });

            ngModel.$formatters.unshift(function () {
                ngModel.$modelValue = parseFloat(ngModel.$modelValue).toFixed(2).replace('.', ',');
                return (ngModel.$modelValue == 'NaN') ? '' : ngModel.$modelValue + ' %';
            });

            ngModel.$parsers.unshift(function (viewValue) {
                return parseFloat(viewValue.replace(',', '.')).toFixed(2);
            });

        }
    };
})

And here is the input with the custom directive:

<input

                    name="valor_simulacao_t"
                    ng-model="input.valor_simulacao_t"

                    type="text"

                    required
                    ng-minlength="1"

                    min="0"
                    max="99.99"
                    format-percentage

                    placeholder="Valor Simulação"
                    autocomplete="off">
                </input>

Answered By – Christophe De Weerdt

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0